DatePicker

The essential BitDatePicker configurations: the default picker, the disabled and required states, a placeholder, week numbers, the highlighting of the current and the selected month, the built-in time picker, the clear and close buttons, keeping the callout open after a selection (AutoClose), clearing the value by selecting the selected day again (AllowDeselect), the date the calendar opens on when there is no value yet (StartingValue), and overriding the current date with Today.

Limit the selectable dates using MinDate and MaxDate. Days outside of the range are disabled, the month, year, and year-range navigation stops at the boundaries, and a date typed into the input outside of the range (when AllowTextInput is enabled) is reported as a validation error. The DisablePast and DisableFuture shortcuts bound the range by today, exactly as a MinDate or MaxDate of today would, and combine with them (the narrower bound wins).

Disable specific dates beyond MinDate and MaxDate: pass an explicit list using DisabledDates, disable whole days of the week using DisabledDaysOfWeek (e.g. weekends), or provide any custom rule using the IsDateDisabled function. Disabled dates cannot be selected and are skipped by the keyboard navigation.

Mark important dates using HighlightedDates, or provide custom CSS classes for any day using the GetDayClass function, which receives each rendered day and returns the classes to add to it. The highlight of today's day can also be turned off using HighlightToday; the day keeps its accessibility semantics and only loses the visual accent.

Customize how the weeks are rendered: override the first day of the week using FirstDayOfWeek, choose the week numbering rule using WeekNumberRule (ISO 8601 is the FirstFourDayWeek rule with Monday as the first day of the week), hide the days of the adjacent months using ShowOutsideDays, and keep the height of the calendar fixed using FixedWeeks.

Control the month and year picker that sits beside the day picker: hide it using IsMonthPickerVisible, or render it as an overlay on top of the day picker (reached through the month title button) using ShowMonthPickerAsOverlay. On screens too narrow for both panels the overlay mode is turned on automatically.

Enable the built-in time picker using ShowTimePicker to let users pick the time of day along with the date. Switch between the 24-hour and the 12-hour clock using TimeFormat, render the time picker as an overlay (reached through the clock button) using ShowTimePickerAsOverlay, and hide the now button using ShowNowButton. While the time picker is on screen, selecting a day keeps the callout open so the time can be set as well.

Customize the increment/decrement step of the hour and minute buttons of the time picker using HourStep and MinuteStep.

Two-way bind the selected date using @bind-Value to keep the model and the picker in sync, or, in uncontrolled mode, set the initial date using DefaultValue and follow the changes through the OnChange callback.

Selected date: 1/17/2020 12:00:00 AM +02:00

Changed date: -

By default, BitDatePicker uses the current culture of the app, but any custom CultureInfo can be provided to fully localize the calendar: the month and day names, the first day of the week, the date formats, and even non-Gregorian calendars such as the Persian calendar.
You also can use our CultureInfoHelper class or check its code to see how to create a custom culture.

Specifies the time zone used to interpret and display the selected date and time. Everything the calendar shows - the highlighted day, the month it opens on, and the time in the time picker - is resolved in that zone.
Remember that using this feature across different runtimes needs more investigation; for example, different time zone data is available based on the OS the code is running on, or different settings enabled for the project (like InvariantTimezone in the project file, more info).

Default (local TimeZone):

Selected date:

"Dateline Standard Time" TimeZone:

Selected date:

The Standalone mode renders the calendar inline, without the input and the callout around it, which suits a form or a panel that has room for the calendar itself. The value still takes part in the surrounding EditForm through a hidden input.

The MonthPicker mode turns the component into a month and year picker: the day picker is not rendered, the input shows the year/month pattern of the culture, and picking a month selects its first day (or the first day the Min/Max range allows).

The ReadOnly parameter shows the value and lets the calendar be browsed, but refuses every change to it: the days, the time picker, and the clear button are all inert, and the input cannot be typed into even where AllowTextInput is set.

Take full control of the rendering using LabelTemplate for the label, IconTemplate for the icon of the input, and DayCellTemplate, MonthCellTemplate, and YearCellTemplate for the content of the day, month, and year cells. Arbitrary content can also be rendered above and below the pickers of the callout using CalloutHeaderTemplate and CalloutFooterTemplate - the footer is a natural place for preset buttons that set the value from the code.

The Responsive mode turns the callout into a full-width panel on small screens, sliding in from the top of the viewport and dismissible with a swipe, which gives the calendar the room it needs on a phone. Resize the window to see it in action.

OnSelectDate reports every date the user picks, OnMonthChange reports the first day of the month the calendar navigates to (through the nav buttons, the month/year pickers, GoToToday, or the keyboard), which is ideal for lazy-loading the data of the visible month, OnClick, OnFocusIn, and OnFocusOut report the interactions with the input, OnClear reports the value getting cleared by the clear button, and OnOpen and OnClose report the callout opening and closing however it happened - a click, the keyboard, or IsOpen set from code.

BitDatePicker follows the WAI-ARIA combobox and grid patterns. From the input, ↓ or ↑ opens the calendar and moves the focus into the grid it opens on; Esc closes it and brings the focus back to the input. Inside the day grid:

• ← / →: previous/next day
• ↑ / ↓: same day of the previous/next week
• Home / End: first/last day of the week
• PageUp / PageDown: same day of the previous/next month
• Shift+PageUp / Shift+PageDown: same day of the previous/next year
• Enter / Space: select the focused day

The month and the year grids answer the same keys, four cells to a row: the arrows move between the cells, Home and End jump to the first and the last of them, and PageUp/PageDown move to the adjacent year (in the month grid) or to the adjacent range of years (in the year grid).

Crossing a month boundary navigates the calendar and keeps the focus on the day, switching between the pickers takes the focus along with it, and disabled days, months, and years are all skipped.

Use BitDatePicker inside an EditForm and validate the selected date with data annotations, just like any other input component. The invalid state is announced through aria-invalid and is styled on the input as well.

The callout can be driven from the outside as well: two-way bind IsOpen to open and close it from the code, or call the OpenCallout and CloseCalloutAndFocus methods on a reference to the component - the first opens the callout exactly as clicking the input would, and the second closes it and hands the focus back to the input. A one-way bound IsOpen keeps the callout under the control of the application: the component reports the change but never closes on its own.

Adapt the input to the surrounding form: Underlined replaces the box with a single underline, HasBorder removes the border altogether, IconLocation moves the calendar icon to the other side of the input, and IconName replaces it with any icon of the built-in Fluent UI set.