Add Mode parameter to BitDatePicker (#11889)

[msynk]

closes #11889

Summary by CodeRabbit

• New Features

  • DatePicker component now supports MonthPicker mode for month and year-only selection, with the day automatically set to the first of the month.

• Documentation

  • Added MonthPicker mode examples demonstrating usage with binding, min/max constraints, and month highlighting in the DatePicker documentation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

This pull request implements a MonthPicker mode for BitDatePicker, enabling month-only selection with the day defaulted to the 1st. It introduces a new BitDatePickerMode enum, modifies the component to support mode-aware parsing, formatting, and rendering, makes the SelectMonth method asynchronous, and adds comprehensive demo examples.

Changes

Cohort / File(s)	Summary
Component implementation src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor	Updated month selection click handler from synchronous to asynchronous lambda (added async/await wrapper)
Component logic src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs	Added public Mode parameter; updated parsing and formatting to use YearMonthPattern for MonthPicker and ShortDatePattern for DatePicker; made SelectMonth asynchronous with mode-aware logic; gated ShowDayPicker, ShowMonthPicker, and ResetPickersState by Mode
Mode enum src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePickerMode.cs	New public enum with DatePicker and MonthPicker members and XML documentation
Demo markup & code-behind src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor, .razor.cs	Removed BOM; replaced ReadOnly example with Mode example; renumbered demo sections (example10–16); added Mode parameter with BitDatePickerMode entries; introduced monthPickerDate field and MonthPicker mode demonstrations
Demo samples src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.samples.cs	Renumbered example fields (example10... → example11..., etc.); introduced new MonthPicker-related demo code blocks; reorganized and reordered sample fields

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

• BitDatePicker.razor.cs: Review the SelectMonth async conversion and mode-aware conditional branches for correct interaction between Mode, ShowMonthPickerAsOverlay, and state transitions.
• Parsing/formatting logic: Verify pattern selection (YearMonthPattern vs. ShortDatePattern) is correctly applied across all code paths.
• ShowDayPicker & ShowMonthPicker logic: Ensure mode-based visibility correctly prevents day selection in MonthPicker mode.
• Demo renumbering: Confirm all example identifiers and code reference updates are consistent across demo files.

Poem

🐰 ✨ A month-picker blooms in picker's light,
No pesky days to mangle the sight!
Select and bind, from month to year,
The first day chosen, crystal clear. 🗓️

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add Mode parameter to BitDatePicker' directly and clearly describes the main change—introducing a Mode parameter to enable MonthPicker functionality as requested in issue #11889.
Linked Issues check	✅ Passed	The pull request implements the core requirement from #11889: adds Mode parameter to BitDatePicker supporting MonthPicker mode where selecting a month sets the date to the 1st of the chosen month/year.
Out of Scope Changes check	✅ Passed	All changes are scope-aligned: the new BitDatePickerMode enum, Mode parameter, async SelectMonth method, mode-aware formatting/parsing logic, and demo updates directly support the MonthPicker feature requested in #11889.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs (1)

1184-1193: Potential duplicate CSS class on highlighted selected month.

When HighlightSelectedMonth is true and the user is in MonthPicker mode viewing the selected month, bit-dtp-psm may be appended twice (once at line 1181 and again at line 1191). Consider consolidating the logic to avoid duplicate class entries.

🔎 Proposed fix to avoid duplicate class

         if (HighlightSelectedMonth && _currentMonth == monthIndex)
         {
             className.Append(" bit-dtp-psm");
         }
 
-        if (Mode == BitDatePickerMode.MonthPicker && CurrentValue.HasValue)
+        if (Mode == BitDatePickerMode.MonthPicker && CurrentValue.HasValue && HighlightSelectedMonth is false)
         {
             var selectedYear = _culture.Calendar.GetYear(CurrentValue.Value.DateTime);
             var selectedMonth = _culture.Calendar.GetMonth(CurrentValue.Value.DateTime);
 
             if (selectedYear == _currentYear && selectedMonth == monthIndex)
             {
                 className.Append(" bit-dtp-psm");
             }
         }

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between d0155f6 and 63114da.

📒 Files selected for processing (6)

• src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor (1 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs (9 hunks)
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePickerMode.cs (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor (7 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.cs (3 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.samples.cs (5 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs (3)

src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Templates/Templates05CreateProjectPage.razor.cs (1)

• Parameter (254-260)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs (24)

• DateTime (1510-1513)
• DateTime (1898-1901)
• DateTime (1903-1906)
• Task (541-544)
• Task (590-601)
• Task (640-685)
• Task (687-695)
• Task (697-705)
• Task (707-715)
• Task (717-723)
• Task (725-738)
• Task (822-888)
• Task (1515-1520)
• Task (1522-1527)
• Task (1580-1597)
• Task (1599-1609)
• Task (1611-1621)
• Task (1709-1718)
• Task (1917-1939)
• SelectMonth (890-903)
• DateTimeOffset (1429-1432)
• DateTimeOffset (1434-1438)
• DateTimeOffset (1497-1508)
• DateTimeOffset (1784-1793)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/BitInputBase.cs (1)

• InvalidValueBinding (392-397)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.cs (3)

src/BlazorUI/Bit.BlazorUI.Assets/Components/Link.razor.cs (1)

• Link (6-32)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs (2)

• DateTimeOffset (1198-1201)
• DateTimeOffset (1203-1207)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs (4)

• DateTimeOffset (1429-1432)
• DateTimeOffset (1434-1438)
• DateTimeOffset (1497-1508)
• DateTimeOffset (1784-1793)

🔇 Additional comments (16)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePickerMode.cs (1)

1-19: Well-structured enum definition with clear documentation.

The enum is cleanly defined with appropriate XML documentation explaining the behavior of each mode. The MonthPicker description correctly clarifies the day-defaulting behavior.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.cs (3)

395-404: Demo parameter documentation is complete and consistent.

The new Mode parameter entry follows the established pattern with proper type, default value, description, and link to the enum section.

---

477-498: Enum documentation matches source definition.

The BitDatePickerMode enum section is correctly defined with matching descriptions and values.

---

950-950: Field follows existing naming conventions.

The monthPickerDate field is appropriately named and typed for the MonthPicker demo binding.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor (1)

384-384: Correct async handler pattern for the awaited method.

The change to async () => await SelectMonth(month) properly awaits the now-async SelectMonth method, ensuring correct async flow in the UI event handler.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.samples.cs (2)

87-114: Comprehensive MonthPicker demo examples.

The new example demonstrates various MonthPicker scenarios including basic usage, two-way binding, min/max constraints, highlighting, and standalone mode. The sample code correctly uses Mode="BitDatePickerMode.MonthPicker" syntax.

---

116-122: Sample renumbering is consistent.

The existing examples have been properly renumbered to accommodate the new MonthPicker demo.

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs (7)

281-286: Mode parameter correctly defined with lifecycle hook.

The Mode parameter follows existing patterns with [CallOnSet(nameof(OnSetParameters))] to ensure proper re-initialization when the mode changes. Default value of BitDatePickerMode.DatePicker maintains backward compatibility.

---

557-560: Mode-aware parsing uses appropriate date patterns.

The parsing logic correctly selects YearMonthPattern for MonthPicker mode and ShortDatePattern for DatePicker mode, falling back to DateFormat if explicitly provided.

---

575-582: Formatting logic mirrors parsing for consistency.

The FormatValueAsString method correctly applies the same pattern logic as parsing, ensuring round-trip consistency between displayed and parsed values.

---

766-794: Async SelectMonth with proper guard clauses and mode handling.

The method correctly:

• Checks for ReadOnly and InvalidValueBinding() in MonthPicker mode
• Respects IsOpenHasBeenSet binding constraints
• Sets the date to the 1st of the selected month per the enum documentation
• Handles AutoClose behavior consistently with SelectDate

---

1392-1393: ShowDayPicker correctly hides day view in MonthPicker mode.

Early return of false ensures the day picker is never rendered when using MonthPicker mode.

---

1413-1414: ShowMonthPicker correctly forces month view in MonthPicker mode.

Early return of true ensures the month picker is always visible when using MonthPicker mode.

---

1435-1436: ResetPickersState initializes overlay correctly for MonthPicker mode.

Setting _isMonthPickerOverlayOnTop and _showMonthPickerAsOverlayInternal based on Mode ensures the month picker is immediately visible and positioned correctly when the callout opens in MonthPicker mode.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor (2)

215-356: Correct example renumbering.

All subsequent examples have been properly renumbered from example11 through example16, with their corresponding Id, RazorCode, and CsharpCode attributes updated consistently.

---

182-213: Excellent MonthPicker demonstration!

The new Mode example comprehensively demonstrates the MonthPicker functionality with multiple scenarios including basic usage, two-way binding, Min/Max constraints, highlighting, and standalone mode. The date format "MMMM yyyy" correctly displays the selected month and year. The monthPickerDate field is properly declared in the code-behind file.