-
-
Notifications
You must be signed in to change notification settings - Fork 362
feat(DateTimePicker): add PickTimeMode parameter #6670
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Reviewer's GuideThis PR implements a new PickTimeMode parameter in the DateTimePicker component, allowing users to choose between dropdown and clock-based time selection. It introduces internal flags to manage both picker modes, extends the markup and styling to support a dropdown time picker, updates toggle behaviors, adjusts date range defaults to use milliseconds precision, and includes minor formatting cleanups in the DatePicker and TimePicker components. Class diagram for DateTimePicker and DatePickerBody with PickTimeModeclassDiagram
class DateTimePickerTimeMode {
<<enum>>
PickTimeByDropdown
PickTimeByClock
}
class DateTimePicker {
+PickTimeMode: DateTimePickerTimeMode
}
class DatePickerBody {
+PickTimeMode: DateTimePickerTimeMode
-_showClockPicker: bool
-_showTimePicker: bool
+OnShowTimePicker()
+OnConfirmTime(TimeSpan)
+OnCloseTime()
+SwitchTimeView()
+SwitchDateView()
+HasSeconds(): bool
}
DateTimePicker --> DatePickerBody : uses
DatePickerBody --> DateTimePickerTimeMode : uses
Class diagram for DateTimeRange sidebar item changesclassDiagram
class DateTimeRange {
-SidebarItems: List<SidebarItem>
+OnParametersSet()
+UpdateValue(DateTime)
}
class SidebarItem {
+Text: string
+StartDateTime: DateTime
+EndDateTime: DateTime
}
DateTimeRange --> SidebarItem : contains
Class diagram for new DateTimePickerTimeMode enumclassDiagram
class DateTimePickerTimeMode {
<<enum>>
PickTimeByDropdown
PickTimeByClock
}
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR adds a new PickTimeMode
parameter to the DateTimePicker component that allows users to choose between dropdown-style time selection and the existing clock-style time selection. The change also includes precision improvements for date range handling and some minor formatting updates.
- Introduces
DateTimePickerTimeMode
enum withPickTimeByDropdown
andPickTimeByClock
options - Updates DateTimePicker to support both time selection modes with appropriate UI rendering
- Improves date range precision by using milliseconds instead of seconds for end times
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
File | Description |
---|---|
DateTimePickerTimeMode.cs | New enum defining time selection modes |
DatePickerBody.razor | Adds conditional rendering for dropdown time picker UI |
DatePickerBody.razor.cs | Implements dropdown time picker functionality and state management |
DatePickerBody.razor.scss | Styles for the new dropdown time picker panel |
DateTimePicker.razor | Minor formatting improvement for input attributes |
DateTimeRange.razor.cs | Updates date range calculations to use milliseconds precision |
TimePicker.razor | Removes empty code block |
DateTimePickers.razor | Updates demo to use specific time format |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey there - I've reviewed your changes - here's some feedback:
- Refactor the repeated _showTimePicker/_showClockPicker resets into a single helper method to reduce duplication and ensure consistent state resets when switching views.
- Update the sample DateTimePickers.razor to demonstrate the new PickTimeMode parameter (both dropdown and clock modes) so users can see how to apply it.
- In DateTimeRange, consider using AddTicks(-1) instead of AddMilliseconds(-1) for end-of-day calculations to capture the very last moment of the day more precisely.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Refactor the repeated _showTimePicker/_showClockPicker resets into a single helper method to reduce duplication and ensure consistent state resets when switching views.
- Update the sample DateTimePickers.razor to demonstrate the new PickTimeMode parameter (both dropdown and clock modes) so users can see how to apply it.
- In DateTimeRange, consider using AddTicks(-1) instead of AddMilliseconds(-1) for end-of-day calculations to capture the very last moment of the day more precisely.
## Individual Comments
### Comment 1
<location> `src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs:737` </location>
<code_context>
+ StateHasChanged();
+ }
+
+ private bool HasSeconds()
+ {
+ if (TimeFormat != null)
</code_context>
<issue_to_address>
TimeFormat.Contains('s') may not reliably detect seconds in all format strings.
Consider parsing the format string for valid time specifiers instead of relying on Contains('s'), which may not accurately detect seconds in all cases.
</issue_to_address>
<suggested_fix>
<<<<<<< SEARCH
private bool HasSeconds()
{
if (TimeFormat != null)
{
return TimeFormat.Contains('s');
}
return TimePickerOption.ShowSecond;
}
=======
private bool HasSeconds()
{
if (!string.IsNullOrEmpty(TimeFormat))
{
return ContainsSecondSpecifier(TimeFormat);
}
return TimePickerOption.ShowSecond;
}
/// <summary>
/// Checks if the time format string contains a valid seconds specifier.
/// </summary>
/// <param name="format">The time format string.</param>
/// <returns>True if seconds specifier is present; otherwise, false.</returns>
private static bool ContainsSecondSpecifier(string format)
{
// Check for common .NET and custom format specifiers for seconds
// "ss" (two-digit seconds), "s" (single-digit seconds), "S" (fractional seconds)
// You can adjust this logic based on your supported formats
return format.Contains("ss") || format.Contains("s") || format.Contains("S");
}
>>>>>>> REPLACE
</suggested_fix>
### Comment 2
<location> `src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor:168` </location>
<code_context>
</div>
</div>
</div>
+ @if (IsDateTimeMode && PickTimeMode == DateTimePickerTimeMode.PickTimeByDropdown)
+ {
+ <div class="@TimePickerClassString">
</code_context>
<issue_to_address>
Consider accessibility and keyboard navigation for the new dropdown time picker.
Check if keyboard users and screen readers can interact with the time picker. Add ARIA attributes or keyboard event handlers as needed.
Suggested implementation:
```
<input type="text"
autocomplete="off"
readonly
class="form-control"
value="@CurrentTime.ToString(TimeFormat)"
aria-haspopup="listbox"
aria-expanded="@IsTimePickerOpen"
aria-label="Select time"
tabindex="0"
@onclick="@OnShowTimePicker"
@onkeydown="@HandleTimePickerKeyDown" />
```
```
<TimePicker Value="CurrentTime" HasSeconds="HasSeconds()"
ShowRequired="false" ShowLabel="false" SkipValidate="true"
OnClose="OnCloseTime" OnConfirm="OnConfirmTime"
role="listbox"
aria-label="Time options"></TimePicker>
```
You will need to implement the following in the code-behind or @code section of this Razor file:
1. Add a property `bool IsTimePickerOpen` to track if the dropdown is open (for `aria-expanded`).
2. Implement the method `HandleTimePickerKeyDown(KeyboardEventArgs e)` to handle Enter/Space keys to open the time picker.
3. Ensure that focus management and closing the dropdown with Escape are handled for full keyboard accessibility.
</issue_to_address>
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs
Outdated
Show resolved
Hide resolved
src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor
Outdated
Show resolved
Hide resolved
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6670 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 739 739
Lines 31674 31707 +33
Branches 4459 4460 +1
=========================================
+ Hits 31674 31707 +33
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Link issues
fixes #6669
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Enable configurable time picking modes in DateTimePicker by adding PickTimeMode parameter and corresponding enum, implement dropdown-based time picker UI alongside existing clock picker, fix DateTimeRange end-of-day logic, and update demo sample.
New Features:
Bug Fixes:
Enhancements:
Documentation: