Accent color
# DatePicker
## Description
A BitDatePicker offers a drop-down control that’s optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available dates.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AllowTextInput | `bool` | false | Whether or not the DatePicker allows a string date input. |
| AutoClose | `bool` | true | Whether the DatePicker closes automatically after selecting the date. |
| CalloutAriaLabel | `string` | Calendar | Aria label of the DatePicker's callout for screen readers. |
| CalloutHtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Capture and render additional html attributes for the DatePicker's callout. |
| Classes | `BitDatePickerClassStyles` | null | Custom CSS classes for different parts of the BitDatePicker. |
| ClearButtonIcon | `BitIconInfo?` | null | The icon to display inside the clear button. Takes precedence over ClearButtonIconName when both are set. |
| ClearButtonIconName | `string?` | null | The name of the clear button's icon from the built-in Fluent UI icon set. |
| CloseButtonIcon | `BitIconInfo?` | null | The icon to display inside the close button. Takes precedence over CloseButtonIconName when both are set. |
| CloseButtonIconName | `string?` | null | The name of the close button's icon from the built-in Fluent UI icon set. |
| CloseDatePickerTitle | `string` | Close date picker | The title of the CloseDatePicker button (tooltip). |
| Culture | `CultureInfo` | CultureInfo.CurrentUICulture | CultureInfo for the DatePicker. |
| DateFormat | `string?` | null | The format of the date in the DatePicker. |
| DayCellTemplate | `RenderFragment<DateTimeOffset>?` | null | Custom template to render the day cells of the DatePicker. |
| GoToNextMonthTitle | `string` | Go to next month | The title of the Go to next month button (tooltip). |
| GoToNextYearRangeTitle | `string` | Next year range {0} - {1} | The title of the Go to next year range button (tooltip). |
| GoToNextYearTitle | `string` | Go to next year {0} | The title of the Go to next year button (tooltip). |
| GoToNowIcon | `BitIconInfo?` | null | The icon to display inside the GoToNow button. Takes precedence over GoToNowIconName when both are set. |
| GoToNowIconName | `string?` | null | The name of the GoToNow button's icon from the built-in Fluent UI icon set. |
| GoToNowTitle | `string` | Go to now | The title of the GoToNow button (tooltip). |
| GoToPrevMonthTitle | `string` | Go to previous month | The title of the Go to previous month button (tooltip). |
| GoToPrevYearRangeTitle | `string` | Previous year range {0} - {1} | The title of the Go to previous year range button (tooltip). |
| GoToPrevYearTitle | `string` | Go to previous year {0} | The title of the Go to previous year button (tooltip). |
| GoToTodayIcon | `BitIconInfo?` | null | The icon to display inside the GoToToday button. Takes precedence over GoToTodayIconName when both are set. |
| GoToTodayIconName | `string?` | null | The name of the GoToToday button's icon from the built-in Fluent UI icon set. |
| GoToTodayTitle | `string` | Go to today | The title of the GoToToday button (tooltip). |
| HasBorder | `bool` | false | Determines if the DatePicker has a border. |
| HideTimePickerIcon | `BitIconInfo?` | null | The icon to display inside the HideTimePicker button. Takes precedence over HideTimePickerIconName when both are set. |
| HideTimePickerIconName | `string?` | null | The name of the HideTimePicker button's icon from the built-in Fluent UI icon set. |
| HideTimePickerTitle | `string` | Hide time picker | The title of the HideTimePicker button (tooltip). |
| HighlightCurrentMonth | `bool` | false | Whether the month picker should highlight the current month. |
| HighlightSelectedMonth | `bool` | false | Whether the month picker should highlight the selected month. |
| HourStep | `int` | 1 | Determines increment/decrement steps for date-picker's hour. |
| Icon | `BitIconInfo?` | null | The icon to display in the DatePicker input using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconLocation | `BitIconLocation` | BitIconLocation.Right | Determines the location of the DatePicker's icon. |
| IconName | `string?` | null | The name of the DatePicker's icon from the built-in Fluent UI icon set. For external icon libraries, use Icon instead. |
| IconTemplate | `RenderFragment?` | null | Custom template for the DatePicker's icon. |
| InvalidErrorMessage | `string?` | null | The custom validation error message for the invalid value. |
| IsMonthPickerVisible | `bool` | true | Whether the month picker is shown or hidden. |
| IsOpen | `bool` | false | Whether or not this DatePicker is open. |
| Label | `string?` | null | The text of the DatePicker's label. |
| LabelTemplate | `RenderFragment?` | null | Custom template for the DatePicker's label. |
| MaxDate | `DateTimeOffset` | null | The maximum date allowed for the DatePicker. |
| MinDate | `DateTimeOffset?` | null | The minimum date allowed for the DatePicker. |
| MinuteStep | `int` | 1 | Determines increment/decrement steps for date-picker's minute. |
| Mode | `BitDatePickerMode` | BitDatePickerMode.DatePicker | The selection mode of the DatePicker (DatePicker or MonthPicker). |
| MonthCellTemplate | `RenderFragment<DateTimeOffset>?` | null | Custom template to render the month cells of the DatePicker. |
| MonthPickerToggleTitle | `string` | {0}, change month | The title of the month picker's toggle (tooltip). |
| NextMonthNavIcon | `BitIconInfo?` | null | The icon to display inside the next-month navigation button. Takes precedence over NextMonthNavIconName when both are set. |
| NextMonthNavIconName | `string?` | null | The name of the next-month navigation button's icon from the built-in Fluent UI icon set. |
| NextYearNavIcon | `BitIconInfo?` | null | The icon to display inside the next-year navigation button. Takes precedence over NextYearNavIconName when both are set. |
| NextYearNavIconName | `string?` | null | The name of the next-year navigation button's icon from the built-in Fluent UI icon set. |
| NextYearRangeNavIcon | `BitIconInfo?` | null | The icon to display inside the next-year-range navigation button. Takes precedence over NextYearRangeNavIconName when both are set. |
| NextYearRangeNavIconName | `string?` | null | The name of the next-year-range navigation button's icon from the built-in Fluent UI icon set. |
| OnClick | `EventCallback` | | The callback for clicking on the DatePicker's input. |
| OnFocus | `EventCallback` | | The callback for focusing the DatePicker's input. |
| OnFocusIn | `EventCallback` | | The callback for when the focus moves into the DatePicker's input. |
| OnFocusOut | `EventCallback` | | The callback for when the focus moves out of the DatePicker's input. |
| Placeholder | `string` | string.Empty | The placeholder text of the DatePicker's input. |
| PrevMonthNavIcon | `BitIconInfo?` | null | The icon to display inside the previous-month navigation button. Takes precedence over PrevMonthNavIconName when both are set. |
| PrevMonthNavIconName | `string?` | null | The name of the previous-month navigation button's icon from the built-in Fluent UI icon set. |
| PrevYearNavIcon | `BitIconInfo?` | null | The icon to display inside the previous-year navigation button. Takes precedence over PrevYearNavIconName when both are set. |
| PrevYearNavIconName | `string?` | null | The name of the previous-year navigation button's icon from the built-in Fluent UI icon set. |
| PrevYearRangeNavIcon | `BitIconInfo?` | null | The icon to display inside the previous-year-range navigation button. Takes precedence over PrevYearRangeNavIconName when both are set. |
| PrevYearRangeNavIconName | `string?` | null | The name of the previous-year-range navigation button's icon from the built-in Fluent UI icon set. |
| Responsive | `bool` | false | Enables the responsive mode in small screens. |
| SelectedDateAriaAtomic | `string` | Selected date {0} | The text of selected date aria-atomic of the calendar. |
| ShowClearButton | `bool` | false | Whether the clear button should be shown or not when the BitDatePicker has a value. |
| ShowCloseButton | `bool` | false | Whether the DatePicker's close button should be shown or not. |
| ShowGoToNow | `bool` | true | Whether the GoToNow button should be shown or not. |
| ShowGoToToday | `bool` | true | Whether the GoToToday button should be shown or not. |
| ShowMonthPickerAsOverlay | `bool` | false | Show month picker on top of date picker when visible. |
| ShowTimePicker | `bool` | false | Whether or not render the time-picker. |
| ShowTimePickerAsOverlay | `bool` | false | Show the time picker as an overlay on top of the date picker when visible. |
| ShowTimePickerIcon | `BitIconInfo?` | null | The icon to display inside the ShowTimePicker button. Takes precedence over ShowTimePickerIconName when both are set. |
| ShowTimePickerIconName | `string?` | null | The name of the ShowTimePicker button's icon from the built-in Fluent UI icon set. |
| ShowTimePickerTitle | `string` | Show time picker | The title of the ShowTimePicker button (tooltip). |
| ShowWeekNumbers | `bool` | false | Whether the week number (weeks 1 to 53) should be shown before each week row. |
| Standalone | `bool` | false | Whether the date-picker is rendered standalone or with the input component and callout. |
| StartingValue | `DateTimeOffset?` | null | Specifies the date and time of the date-picker when it is opened without any selected value. |
| Styles | `BitDatePickerClassStyles` | null | Custom CSS styles for different parts of the BitDatePicker. |
| TimeFormat | `BitTimeFormat` | BitTimeFormat.TwentyFourHours | The time format of the time-picker, 24H or 12H. |
| TimePickerDecreaseHourIcon | `BitIconInfo?` | null | The icon to display inside the time-picker's decrease-hour button. Takes precedence over TimePickerDecreaseHourIconName when both are set. |
| TimePickerDecreaseHourIconName | `string?` | null | The name of the time-picker's decrease-hour button icon from the built-in Fluent UI icon set. |
| TimePickerDecreaseMinuteIcon | `BitIconInfo?` | null | The icon to display inside the time-picker's decrease-minute button. Takes precedence over TimePickerDecreaseMinuteIconName when both are set. |
| TimePickerDecreaseMinuteIconName | `string?` | null | The name of the time-picker's decrease-minute button icon from the built-in Fluent UI icon set. |
| TimePickerIncreaseHourIcon | `BitIconInfo?` | null | The icon to display inside the time-picker's increase-hour button. Takes precedence over TimePickerIncreaseHourIconName when both are set. |
| TimePickerIncreaseHourIconName | `string?` | null | The name of the time-picker's increase-hour button icon from the built-in Fluent UI icon set. |
| TimePickerIncreaseMinuteIcon | `BitIconInfo?` | null | The icon to display inside the time-picker's increase-minute button. Takes precedence over TimePickerIncreaseMinuteIconName when both are set. |
| TimePickerIncreaseMinuteIconName | `string?` | null | The name of the time-picker's increase-minute button icon from the built-in Fluent UI icon set. |
| TimeZone | `TimeZoneInfo?` | null | TimeZone for the DatePicker. |
| Underlined | `bool` | false | Whether or not the Text field of the DatePicker is underlined. |
| WeekNumberTitle | `string` | Week number {0} | The title of the week number (tooltip). |
| YearCellTemplate | `RenderFragment<int>?` | null | Custom template to render the year cells of the DatePicker. |
| YearPickerToggleTitle | `string` | {0}, change year | The title of the year picker's toggle (tooltip). |
| YearRangePickerToggleTitle | `string` | {0} - {1}, change month | The title of the year range picker's toggle (tooltip). |
| DefaultValue | `TValue?` | null | The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback. |
| DisplayName | `string?` | null | Gets or sets the display name for this field. |
| InputHtmlAttributes | `IReadOnlyDictionary<string, object>?` | null | Gets or sets a collection of additional attributes that will be applied to the created element. |
| Name | `string?` | null | Gets or sets the name of the element. Allows access by name from the associated form. |
| NoValidate | `bool` | false | Disables the validation of the input. |
| OnChange | `EventCallback<TValue?>` | | Callback for when the input value changes. |
| ReadOnly | `bool` | false | Makes the input read-only. |
| Required | `bool` | false | Makes the input required. |
| Value | `TValue?` | null | Gets or sets the value of the input. This should be used with two-way binding. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| InputElement | `ElementReference` | | The ElementReference of the input element. |
| FocusAsync() | `() => ValueTask` | | Gives focus to the input element. |
| FocusAsync(bool preventScroll) | `(bool preventScroll) => ValueTask` | | Gives focus to the input element. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | Show content of the component. |
| Hidden | 1 | Hide content of the component,though the space it takes on the page remains. |
| Collapsed | 2 | Hide content of the component,though the space it takes on the page gone. |
### BitIconLocation Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Left | 0 | Show the icon at the left side. |
| Right | 1 | Show the icon at the right side. |
### BitTimeFormat Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| TwentyFourHours | 0 | Show time pickers in 24 hours format. |
| TwelveHours | 1 | Show time pickers in 12 hours format. |
### BitDatePickerMode Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| DatePicker | 0 | Standard date picker mode allowing selection of a specific day. |
| MonthPicker | 1 | Month picker mode allowing selection of only month and year. The day is automatically set to the 1st of the selected month. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitDatePickerClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitDatePicker. |
| Focused | `string?` | null | Custom CSS classes/styles for the focused state of the BitDatePicker. |
| Label | `string?` | null | Custom CSS classes/styles for the Label of the BitDatePicker. |
| InputWrapper | `string?` | null | Custom CSS classes/styles for the input wrapper of the BitDatePicker. |
| InputContainer | `string?` | null | Custom CSS classes/styles for the input container of the BitDatePicker. |
| InputContainer | `string?` | null | Custom CSS classes/styles for the input container of the BitDatePicker. |
| Input | `string?` | null | Custom CSS classes/styles for the input of the BitDatePicker. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon of the BitDatePicker. |
| Overlay | `string?` | null | Custom CSS classes/styles for the overlay of the BitDatePicker. |
| Callout | `string?` | null | Custom CSS classes/styles for the callout of the BitDatePicker. |
| CalloutContainer | `string?` | null | Custom CSS classes/styles for the callout container of the BitDatePicker. |
| Group | `string?` | null | Custom CSS classes/styles for the group of the BitDatePicker. |
| DayPickerWrapper | `string?` | null | Custom CSS classes/styles for the day-picker's wrapper of the BitDatePicker. |
| DayPickerHeader | `string?` | null | Custom CSS classes/styles for the day-picker's header of the BitDatePicker. |
| DayPickerMonth | `string?` | null | Custom CSS classes/styles for the day-picker's month of the BitDatePicker. |
| DayPickerNavWrapper | `string?` | null | Custom CSS classes/styles for the wrapper of the day-picker's nav buttons of the BitDatePicker. |
| PrevMonthNavButton | `string?` | null | Custom CSS classes/styles for the Go to previous month button of the BitDatePicker. |
| PrevMonthNavIcon | `string?` | null | Custom CSS classes/styles for the Go to previous month icon of the BitDatePicker. |
| GoToTodayButton | `string?` | null | Custom CSS classes/styles for the Go to today button of the BitDatePicker. |
| GoToTodayIcon | `string?` | null | Custom CSS classes/styles for the Go to today icon of the BitDatePicker. |
| CloseButton | `string?` | null | Custom CSS classes/styles for the close button of the BitDatePicker. |
| CloseButtonIcon | `string?` | null | Custom CSS classes/styles for the close button icon of the BitDatePicker. |
| NextMonthNavButton | `string?` | null | Custom CSS classes/styles for the Go to next month button of the BitDatePicker. |
| NextMonthNavIcon | `string?` | null | Custom CSS classes/styles for the Go to next month icon of the BitDatePicker. |
| DaysHeaderRow | `string?` | null | Custom CSS classes/styles for the header row of the days of the BitDatePicker. |
| WeekNumbersHeader | `string?` | null | Custom CSS classes/styles for the header of the week numbers of the BitDatePicker. |
| DaysRow | `string?` | null | Custom CSS classes/styles for each row of the days of the BitDatePicker. |
| WeekNumber | `string?` | null | Custom CSS classes/styles for the week number of the BitDatePicker. |
| DayButton | `string?` | null | Custom CSS classes/styles for each day button of the BitDatePicker. |
| TodayDayButton | `string?` | null | Custom CSS classes/styles for today day button of the BitDatePicker. |
| SelectedDayButton | `string?` | null | Custom CSS classes/styles for selected day button of the BitDatePicker. |
| TimePickerContainer | `string?` | null | Custom CSS classes/styles for the time-picker's main container of the BitDatePicker. |
| TimePickerWrapper | `string?` | null | Custom CSS classes/styles for the time-picker's wrapper of the BitDatePicker. |
| TimePickerHourMinuteSeparator | `string?` | null | Custom CSS classes/styles for the time-picker's hour/minute separator of the BitDatePicker. |
| TimePickerDivider | `string?` | null | Custom CSS classes/styles for the time-picker's divider of the BitDatePicker. |
| TimePickerMinuteInput | `string?` | null | Custom CSS classes/styles for the time-picker's minute input of the BitDatePicker. |
| TimePickerAmPmContainer | `string?` | null | Custom CSS classes/styles for the time-picker's Am Pm container of the BitDatePicker. |
| TimePickerAmButton | `string?` | null | Custom CSS classes/styles for the time-picker's Am button of the BitDatePicker. |
| TimePickerPmButton | `string?` | null | Custom CSS classes/styles for the time-picker's Pm button of the BitDatePicker. |
| Divider | `string?` | null | Custom CSS classes/styles for the main divider of the BitDatePicker. |
| YearMonthPickerWrapper | `string?` | null | Custom CSS classes/styles for the year-month-picker's wrapper of the BitDatePicker. |
| MonthPickerHeader | `string?` | null | Custom CSS classes/styles for the month-picker's header of the BitDatePicker. |
| YearPickerToggleButton | `string?` | null | Custom CSS classes/styles for the year-picker's toggle button of the BitDatePicker. |
| MonthPickerNavWrapper | `string?` | null | Custom CSS classes/styles for the wrapper of the month-picker's nav buttons of the BitDatePicker. |
| PrevYearNavButton | `string?` | null | Custom CSS classes/styles for the Go to previous year button of the BitDatePicker. |
| PrevYearNavIcon | `string?` | null | Custom CSS classes/styles for the Go to previous year icon of the BitDatePicker. |
| NextYearNavButton | `string?` | null | Custom CSS classes/styles for the Go to next year button of the BitDatePicker. |
| NextYearNavIcon | `string?` | null | Custom CSS classes/styles for the Go to next year icon of the BitDatePicker. |
| MonthsContainer | `string?` | null | Custom CSS classes/styles for the months container of the BitDatePicker. |
| MonthsRow | `string?` | null | Custom CSS classes/styles for each row of the months of the BitDatePicker. |
| MonthButton | `string?` | null | Custom CSS classes/styles for each month button of the BitDatePicker. |
| YearPickerHeader | `string?` | null | Custom CSS classes/styles for the year-picker's header of the BitDatePicker. |
| MonthPickerToggleButton | `string?` | null | Custom CSS classes/styles for the month-picker's toggle button of the BitDatePicker. |
| YearPickerNavWrapper | `string?` | null | Custom CSS classes/styles for the wrapper of the year-picker nav buttons of the BitDatePicker. |
| PrevYearRangeNavButton | `string?` | null | Custom CSS classes/styles for the Go to previous year-range button of the BitDatePicker. |
| PrevYearRangeNavIcon | `string?` | null | Custom CSS classes/styles for the Go to previous year-range icon of the BitDatePicker. |
| NextYearRangeNavButton | `string?` | null | Custom CSS classes/styles for the Go to next year-range button of the BitDatePicker. |
| NextYearRangeNavIcon | `string?` | null | Custom CSS classes/styles for the Go to next year-range icon of the BitDatePicker. |
| YearsContainer | `string?` | null | Custom CSS classes/styles for the years container of the BitDatePicker. |
| YearsRow | `string?` | null | Custom CSS classes/styles for each row of the years of the BitDatePicker. |
| YearButton | `string?` | null | Custom CSS classes/styles for each year button of the BitDatePicker. |
### BitIconInfo Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string?` | null | Gets or sets the name of the icon. |
| BaseClass | `string?` | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | `string?` | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
## Examples
\n**Basic**:
```razor
Custom label
@context.Day
@if (context.Day % 5 is 0)
{
}
@context
AC
```
```csharp
private CultureInfo culture = CultureInfo.CurrentUICulture;
```
\n**Responsive**:
```razor
Submit
Reset
```
```csharp
public class BitDatePickerValidationModel
{
[Required]
public DateTimeOffset? Date { get; set; }
}
private string SuccessMessage = string.Empty;
private BitDatePickerValidationModel validationModel = new();
private void HandleValidSubmit() { }
private void HandleInvalidSubmit() { }
```
\n**External Icons**:
```razor
Selected date: @selectedDate.ToString()
```
```csharp
private DateTimeOffset? selectedDate = new DateTimeOffset(2020, 1, 17, 0, 0, 0, DateTimeOffset.Now.Offset);
```
\n**Culture**:
```razor
Selected date: @timeZoneDate1?.ToString()
@{
TimeZoneInfo? timeZoneInfo = null;
var allTimeZones = TimeZoneInfo.GetSystemTimeZones();
if (allTimeZones.Count > 0)
{
timeZoneInfo = allTimeZones[0];
}
}
@if (timeZoneInfo is not null) {
"@timeZoneInfo.Id" TimeZone:
Selected date: @timeZoneDate2?.ToString()
}
```
```csharp
private DateTimeOffset? timeZoneDate1;
private DateTimeOffset? timeZoneDate2;
```
\n**Standalone**:
```razor
Selected Date: @(monthPickerDate?.ToString("yyyy/MM/dd HH:mm:ss") ?? "None")
@culture.DateTimeFormat.GetAbbreviatedMonthName(context.Month)