feat(DatetimeRange): simplify SCSS selectors for start and end#7098
Merged
feat(DatetimeRange): simplify SCSS selectors for start and end#7098
Conversation
Contributor
Reviewer's guide (collapsed on small PRs)Reviewer's GuideThis PR refactors the DatePickerBody component by extracting month and range logic into dedicated helper methods, tightening the application of start/end/range CSS classes to current-month dates, and simplifying SCSS selectors for those states. Class diagram for updated DatePickerBody logicclassDiagram
class DatePickerBody {
- DateTime CurrentDate
- DateTime SelectValue
- Ranger? Ranger
+ string? GetDayClass(DateTime day, bool overflow)
+ bool IsPrevMonth(DateTime day)
+ bool IsNextMonth(DateTime day)
+ bool IsCurrentMonth(DateTime day)
+ bool IsRange(DateTime day)
}
Flow diagram for day class assignment logicflowchart TD
A["GetDayClass(day, overflow)"] --> B["IsPrevMonth(day)?"]
B -- Yes --> C["Add 'prev-month' class"]
B -- No --> D["IsNextMonth(day)?"]
D -- Yes --> E["Add 'next-month' class"]
D -- No --> F["IsCurrentMonth(day)?"]
F -- Yes --> G["IsRange(day)?"]
G -- Yes --> H["Add 'range' class"]
G -- No --> I["Continue"]
F -- No --> I
A --> J["IsCurrentMonth(day) && day == Ranger.SelectedValue.Start.Date?"]
J -- Yes --> K["Add 'start' class"]
J -- No --> L["Continue"]
A --> M["IsCurrentMonth(day) && day == Ranger.SelectedValue.End.Date?"]
M -- Yes --> N["Add 'end' class"]
M -- No --> O["Continue"]
A --> P["IsDisabled(day) || overflow?"]
P -- Yes --> Q["Add 'disabled' class"]
P -- No --> R["Continue"]
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
ArgoZhang
changed the title
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7098 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 745 745
Lines 32542 32548 +6
Branches 4509 4510 +1
=========================================
+ Hits 32542 32548 +6
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:
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR updates the styling logic for start/end dates in the DatetimeRange component to ensure these classes are only applied to dates within the current month being displayed.
Key Changes:
- Simplified SCSS selectors by removing month-specific restrictions and moving logic to C#
- Added
IsCurrentMonth()condition to start/end/range CSS classes in the code - Extracted month comparison logic into reusable helper methods
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| DatePickerBody.razor.scss | Simplified CSS selectors for .start and .end classes by removing :not(.next-month):not(.prev-month) conditions |
| DatePickerBody.razor.cs | Added IsCurrentMonth() checks to start/end/range class logic and introduced helper methods for month comparisons |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+70
to
+74
| private bool IsPrevMonth(DateTime day) => day.Month < CurrentDate.Month; | ||
|
|
||
| private bool IsNextMonth(DateTime day) => day.Month > CurrentDate.Month; | ||
|
|
||
| private bool IsCurrentMonth(DateTime day) => day.Month == CurrentDate.Month; |
There was a problem hiding this comment.
The month comparison methods IsPrevMonth, IsNextMonth, and IsCurrentMonth only compare the month component without considering the year. This will cause incorrect behavior when the calendar displays dates that cross year boundaries.
For example:
- When viewing January 2024, a date from December 2023 will incorrectly be classified as "next-month" (12 > 1) instead of "prev-month"
- When viewing December 2024, a date from January 2025 will incorrectly be classified as "prev-month" (1 < 12) instead of "next-month"
Consider using a date comparison or year-aware logic:
private bool IsPrevMonth(DateTime day) => day.Year < CurrentDate.Year || (day.Year == CurrentDate.Year && day.Month < CurrentDate.Month);
private bool IsNextMonth(DateTime day) => day.Year > CurrentDate.Year || (day.Year == CurrentDate.Year && day.Month > CurrentDate.Month);
private bool IsCurrentMonth(DateTime day) => day.Year == CurrentDate.Year && day.Month == CurrentDate.Month;
Suggested change
| private bool IsPrevMonth(DateTime day) => day.Month < CurrentDate.Month; | |
| private bool IsNextMonth(DateTime day) => day.Month > CurrentDate.Month; | |
| private bool IsCurrentMonth(DateTime day) => day.Month == CurrentDate.Month; | |
| private bool IsPrevMonth(DateTime day) => day.Year < CurrentDate.Year || (day.Year == CurrentDate.Year && day.Month < CurrentDate.Month); | |
| private bool IsNextMonth(DateTime day) => day.Year > CurrentDate.Year || (day.Year == CurrentDate.Year && day.Month > CurrentDate.Month); | |
| private bool IsCurrentMonth(DateTime day) => day.Year == CurrentDate.Year && day.Month == CurrentDate.Month; |
This was referenced Nov 12, 2025
This was referenced Nov 19, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Link issues
fixes #7097
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Update the date picker’s range styling by refactoring date classification logic and refining CSS rules to ensure start, end, and range styles are applied only to current month days
Bug Fixes:
Enhancements: