Ant Design Blazor
DatePicker
Examples
Basic use case. Users can select or input a date in panel.
We can set the date format by format.
This property provide an additional time selection. When showTime is an Object, its properties will be passed on to built-in TimePicker.
Disabled part of dates and time by disabledDate and disabledTime respectively, and disabledTime only works with showTime.
We can set preset ranges to RangePicker to improve user experience.
The input box comes in three sizes. default will be used if size is omitted.
We can set the localization with the Locale parameter for localization and the CultureInfo for handling the parsing and formatting.
Note: The built-in localization configuration is not perfect. You can set the first day of the week (
FirstDayOfWeek, defaultSunday) and the shortest day names of week (ShortWeekDays, The default[" Su ", "Mo", "Tu", "We", "Th", "Fr", "Sa"]) make the calendar component conforms to the display effect. If you do not set this parameter, the default configuration in the Globalization is automatically used. Of course, we would appreciate it if you could improve our localization files.
Choose your own suffix icon to display. This will replace the default suffix icon for the picker.
Set range picker type by picker prop.
We can set the date input format by Mask.
A disabled state of the DatePicker. You can also set as array to disable one of input.
A example shows how to select a dynamic range by using onCalendarChange and disabledDate.
Render extra footer in panel for customized requirements.
We can customize the rendering of date cells in the calendar by providing a dateRender function to DatePicker.
Bordered-less style component.
You can manually specify the position of the popup via placement.
DatePicker API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| OnChange | ParameterCallback executed when the selected value changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| ChangeOnClose | ParameterSaving the input value after blur | Boolean | -- |
| Picker | ParameterSet picker type | DatePickerType | -- |
| PopupContainerSelector | ParameterSelector for placing the container of the popup in | String | -- |
| Disabled | ParameterDisable the date picker. When given a single boolean, it will disable all of it. When given an array of booleans, it represents disabling the start/end of a range: [start, end] | OneOf<Boolean, Boolean[]> | -- |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | -- |
| Bordered | ParameterShow a border or not | Boolean | true |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Open | ParameterIf the picker is open or not | Boolean | false |
| InputReadOnly | ParameterIf the picker is read-only or not | Boolean | false |
| ShowToday | ParameterWhether to show the Today button which selects Today from any date | Boolean | true |
| Mask | ParameterLocale for localizing UI strings | String | LocaleProvider.CurrentLocale.DatePicker |
| Locale | Parameter | DatePickerLocale | -- |
| CultureInfo | ParameterCultureInfo to use for localization | CultureInfo | CultureInfo for Locale |
| ShowTime | ParameterShow time or not. When boolean, it sets ShowTime to the boolean. When string, it sets ShowTime to true and uses the string value as the time format. |
OneOf<Boolean, String> | -- |
| AllowClear | ParameterAllow clearing the selected value or not | Boolean | true |
| Placeholder | ParameterPlaceholder for input | OneOf<String, String[]> | -- |
| PopupStyle | ParameterStyle applied to popup | String | -- |
| ClassName | ParameterPicker class name | String | -- |
| DropdownClassName | ParameterClass name for popover dropdown | String | -- |
| Format | ParameterFormat for the DateTime display | String | -- |
| DefaultValue | ParameterDefault value | TValue | -- |
| DefaultPickerValue | ParameterDefault value of the picker | TValue | -- |
| SuffixIcon | ParameterCustom suffix icon | RenderFragment | -- |
| Ranges | ParameterRange selection presets to allow the user to select a range with one button click | Dictionary<String, Nullable`1[]> | -- |
| RenderExtraFooter | ParameterExtra content to display in picker footer | RenderFragment | -- |
| OnClearClick | ParameterCallback executed when clear is clickedUse OnClear instead Obsolete Will be removed in a future version. |
EventCallback | -- |
| OnClear | ParameterCalled when clear button clicked. | EventCallback | -- |
| OnOk | ParameterCallback executed when ok is clicked | EventCallback | -- |
| OnOpenChange | ParameterCallback executed when popover calendar is opened or closed | EventCallback<Boolean> | -- |
| OnPanelChange | ParameterCallback executed when the type of panel displayed changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| DisabledDate | ParameterFunction to determine if a provided date should be disabled | Func<DateTime, Boolean> | -- |
| DisabledHours | ParameterFunction to determine if a hours in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledMinutes | ParameterFunction to determine if a minutes in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledSeconds | ParameterFunction to determine if a seconds in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledTime | ParameterFunction to determine what pieces of time should be disabled in a date | Func<DateTime, DatePickerDisabledTime> | -- |
| DateRender | ParameterCustom rendering for date cells | Func<DateTime, DateTime, RenderFragment> | -- |
| MonthCellRender | ParameterCustom rendering for month cells | Func<DateTime, RenderFragment> | -- |
| Placement | ParameterThe position where the selection box pops up | Placement | -- |
| Use12Hours | ParameterWhen true, will use 12 hour time. When false will use 24 hour time | Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | TValue | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<TValue> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<TValue>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<TValue>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.Default |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| FocusAsync() | Task | Add focus to picker input |
| BlurAsync() | Task | Remove focus from picker input |
| Close() | void | Close the popover |
MonthPicker API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| OnChange | ParameterCallback executed when the selected value changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| ChangeOnClose | ParameterSaving the input value after blur | Boolean | -- |
| Picker | ParameterSet picker type | DatePickerType | -- |
| PopupContainerSelector | ParameterSelector for placing the container of the popup in | String | -- |
| Disabled | ParameterDisable the date picker. When given a single boolean, it will disable all of it. When given an array of booleans, it represents disabling the start/end of a range: [start, end] | OneOf<Boolean, Boolean[]> | -- |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | -- |
| Bordered | ParameterShow a border or not | Boolean | true |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Open | ParameterIf the picker is open or not | Boolean | false |
| InputReadOnly | ParameterIf the picker is read-only or not | Boolean | false |
| ShowToday | ParameterWhether to show the Today button which selects Today from any date | Boolean | true |
| Mask | ParameterLocale for localizing UI strings | String | LocaleProvider.CurrentLocale.DatePicker |
| Locale | Parameter | DatePickerLocale | -- |
| CultureInfo | ParameterCultureInfo to use for localization | CultureInfo | CultureInfo for Locale |
| ShowTime | ParameterShow time or not. When boolean, it sets ShowTime to the boolean. When string, it sets ShowTime to true and uses the string value as the time format. |
OneOf<Boolean, String> | -- |
| AllowClear | ParameterAllow clearing the selected value or not | Boolean | true |
| Placeholder | ParameterPlaceholder for input | OneOf<String, String[]> | -- |
| PopupStyle | ParameterStyle applied to popup | String | -- |
| ClassName | ParameterPicker class name | String | -- |
| DropdownClassName | ParameterClass name for popover dropdown | String | -- |
| Format | ParameterFormat for the DateTime display | String | -- |
| DefaultValue | ParameterDefault value | TValue | -- |
| DefaultPickerValue | ParameterDefault value of the picker | TValue | -- |
| SuffixIcon | ParameterCustom suffix icon | RenderFragment | -- |
| Ranges | ParameterRange selection presets to allow the user to select a range with one button click | Dictionary<String, Nullable`1[]> | -- |
| RenderExtraFooter | ParameterExtra content to display in picker footer | RenderFragment | -- |
| OnClearClick | ParameterCallback executed when clear is clickedUse OnClear instead Obsolete Will be removed in a future version. |
EventCallback | -- |
| OnClear | ParameterCalled when clear button clicked. | EventCallback | -- |
| OnOk | ParameterCallback executed when ok is clicked | EventCallback | -- |
| OnOpenChange | ParameterCallback executed when popover calendar is opened or closed | EventCallback<Boolean> | -- |
| OnPanelChange | ParameterCallback executed when the type of panel displayed changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| DisabledDate | ParameterFunction to determine if a provided date should be disabled | Func<DateTime, Boolean> | -- |
| DisabledHours | ParameterFunction to determine if a hours in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledMinutes | ParameterFunction to determine if a minutes in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledSeconds | ParameterFunction to determine if a seconds in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledTime | ParameterFunction to determine what pieces of time should be disabled in a date | Func<DateTime, DatePickerDisabledTime> | -- |
| DateRender | ParameterCustom rendering for date cells | Func<DateTime, DateTime, RenderFragment> | -- |
| MonthCellRender | ParameterCustom rendering for month cells | Func<DateTime, RenderFragment> | -- |
| Placement | ParameterThe position where the selection box pops up | Placement | -- |
| Use12Hours | ParameterWhen true, will use 12 hour time. When false will use 24 hour time | Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | TValue | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<TValue> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<TValue>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<TValue>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.Default |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| FocusAsync() | Task | Add focus to picker input |
| BlurAsync() | Task | Remove focus from picker input |
| Close() | void | Close the popover |
RangePicker API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | TValue | -- |
| OnChange | ParameterCallback executed when range selected changes | EventCallback<DateRangeChangedEventArgs<TValue>> | -- |
| DisabledDate | Parameter | Func<DateTime, Boolean> | -- |
| ChangeOnClose | ParameterSaving the input value after blur | Boolean | -- |
| Picker | ParameterSet picker type | DatePickerType | -- |
| PopupContainerSelector | ParameterSelector for placing the container of the popup in | String | -- |
| Disabled | ParameterDisable the date picker. When given a single boolean, it will disable all of it. When given an array of booleans, it represents disabling the start/end of a range: [start, end] | OneOf<Boolean, Boolean[]> | -- |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | -- |
| Bordered | ParameterShow a border or not | Boolean | true |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Open | ParameterIf the picker is open or not | Boolean | false |
| InputReadOnly | ParameterIf the picker is read-only or not | Boolean | false |
| ShowToday | ParameterWhether to show the Today button which selects Today from any date | Boolean | true |
| Mask | ParameterLocale for localizing UI strings | String | LocaleProvider.CurrentLocale.DatePicker |
| Locale | Parameter | DatePickerLocale | -- |
| CultureInfo | ParameterCultureInfo to use for localization | CultureInfo | CultureInfo for Locale |
| ShowTime | ParameterShow time or not. When boolean, it sets ShowTime to the boolean. When string, it sets ShowTime to true and uses the string value as the time format. |
OneOf<Boolean, String> | -- |
| AllowClear | ParameterAllow clearing the selected value or not | Boolean | true |
| Placeholder | ParameterPlaceholder for input | OneOf<String, String[]> | -- |
| PopupStyle | ParameterStyle applied to popup | String | -- |
| ClassName | ParameterPicker class name | String | -- |
| DropdownClassName | ParameterClass name for popover dropdown | String | -- |
| Format | ParameterFormat for the DateTime display | String | -- |
| DefaultValue | ParameterDefault value | TValue | -- |
| DefaultPickerValue | ParameterDefault value of the picker | TValue | -- |
| SuffixIcon | ParameterCustom suffix icon | RenderFragment | -- |
| Ranges | ParameterRange selection presets to allow the user to select a range with one button click | Dictionary<String, Nullable`1[]> | -- |
| RenderExtraFooter | ParameterExtra content to display in picker footer | RenderFragment | -- |
| OnClearClick | ParameterCallback executed when clear is clickedUse OnClear instead Obsolete Will be removed in a future version. |
EventCallback | -- |
| OnClear | ParameterCalled when clear button clicked. | EventCallback | -- |
| OnOk | ParameterCallback executed when ok is clicked | EventCallback | -- |
| OnOpenChange | ParameterCallback executed when popover calendar is opened or closed | EventCallback<Boolean> | -- |
| OnPanelChange | ParameterCallback executed when the type of panel displayed changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| DisabledHours | ParameterFunction to determine if a hours in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledMinutes | ParameterFunction to determine if a minutes in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledSeconds | ParameterFunction to determine if a seconds in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledTime | ParameterFunction to determine what pieces of time should be disabled in a date | Func<DateTime, DatePickerDisabledTime> | -- |
| DateRender | ParameterCustom rendering for date cells | Func<DateTime, DateTime, RenderFragment> | -- |
| MonthCellRender | ParameterCustom rendering for month cells | Func<DateTime, RenderFragment> | -- |
| Placement | ParameterThe position where the selection box pops up | Placement | -- |
| Use12Hours | ParameterWhen true, will use 12 hour time. When false will use 24 hour time | Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<TValue> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<TValue>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<TValue>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.Default |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| FocusAsync(Int32 index) | Task | Add focus to picker input |
| BlurAsync(Int32 index) | Task | Remove focus from picker input |
| Close() | void | Close the popover |
WeekPicker API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| OnChange | ParameterCallback executed when the selected value changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| ChangeOnClose | ParameterSaving the input value after blur | Boolean | -- |
| Picker | ParameterSet picker type | DatePickerType | -- |
| PopupContainerSelector | ParameterSelector for placing the container of the popup in | String | -- |
| Disabled | ParameterDisable the date picker. When given a single boolean, it will disable all of it. When given an array of booleans, it represents disabling the start/end of a range: [start, end] | OneOf<Boolean, Boolean[]> | -- |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | -- |
| Bordered | ParameterShow a border or not | Boolean | true |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Open | ParameterIf the picker is open or not | Boolean | false |
| InputReadOnly | ParameterIf the picker is read-only or not | Boolean | false |
| ShowToday | ParameterWhether to show the Today button which selects Today from any date | Boolean | true |
| Mask | ParameterLocale for localizing UI strings | String | LocaleProvider.CurrentLocale.DatePicker |
| Locale | Parameter | DatePickerLocale | -- |
| CultureInfo | ParameterCultureInfo to use for localization | CultureInfo | CultureInfo for Locale |
| ShowTime | ParameterShow time or not. When boolean, it sets ShowTime to the boolean. When string, it sets ShowTime to true and uses the string value as the time format. |
OneOf<Boolean, String> | -- |
| AllowClear | ParameterAllow clearing the selected value or not | Boolean | true |
| Placeholder | ParameterPlaceholder for input | OneOf<String, String[]> | -- |
| PopupStyle | ParameterStyle applied to popup | String | -- |
| ClassName | ParameterPicker class name | String | -- |
| DropdownClassName | ParameterClass name for popover dropdown | String | -- |
| Format | ParameterFormat for the DateTime display | String | -- |
| DefaultValue | ParameterDefault value | TValue | -- |
| DefaultPickerValue | ParameterDefault value of the picker | TValue | -- |
| SuffixIcon | ParameterCustom suffix icon | RenderFragment | -- |
| Ranges | ParameterRange selection presets to allow the user to select a range with one button click | Dictionary<String, Nullable`1[]> | -- |
| RenderExtraFooter | ParameterExtra content to display in picker footer | RenderFragment | -- |
| OnClearClick | ParameterCallback executed when clear is clickedUse OnClear instead Obsolete Will be removed in a future version. |
EventCallback | -- |
| OnClear | ParameterCalled when clear button clicked. | EventCallback | -- |
| OnOk | ParameterCallback executed when ok is clicked | EventCallback | -- |
| OnOpenChange | ParameterCallback executed when popover calendar is opened or closed | EventCallback<Boolean> | -- |
| OnPanelChange | ParameterCallback executed when the type of panel displayed changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| DisabledDate | ParameterFunction to determine if a provided date should be disabled | Func<DateTime, Boolean> | -- |
| DisabledHours | ParameterFunction to determine if a hours in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledMinutes | ParameterFunction to determine if a minutes in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledSeconds | ParameterFunction to determine if a seconds in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledTime | ParameterFunction to determine what pieces of time should be disabled in a date | Func<DateTime, DatePickerDisabledTime> | -- |
| DateRender | ParameterCustom rendering for date cells | Func<DateTime, DateTime, RenderFragment> | -- |
| MonthCellRender | ParameterCustom rendering for month cells | Func<DateTime, RenderFragment> | -- |
| Placement | ParameterThe position where the selection box pops up | Placement | -- |
| Use12Hours | ParameterWhen true, will use 12 hour time. When false will use 24 hour time | Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | TValue | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<TValue> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<TValue>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<TValue>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.Default |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| FocusAsync() | Task | Add focus to picker input |
| BlurAsync() | Task | Remove focus from picker input |
| Close() | void | Close the popover |
YearPicker API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| OnChange | ParameterCallback executed when the selected value changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| ChangeOnClose | ParameterSaving the input value after blur | Boolean | -- |
| Picker | ParameterSet picker type | DatePickerType | -- |
| PopupContainerSelector | ParameterSelector for placing the container of the popup in | String | -- |
| Disabled | ParameterDisable the date picker. When given a single boolean, it will disable all of it. When given an array of booleans, it represents disabling the start/end of a range: [start, end] | OneOf<Boolean, Boolean[]> | -- |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | -- |
| Bordered | ParameterShow a border or not | Boolean | true |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Open | ParameterIf the picker is open or not | Boolean | false |
| InputReadOnly | ParameterIf the picker is read-only or not | Boolean | false |
| ShowToday | ParameterWhether to show the Today button which selects Today from any date | Boolean | true |
| Mask | ParameterLocale for localizing UI strings | String | LocaleProvider.CurrentLocale.DatePicker |
| Locale | Parameter | DatePickerLocale | -- |
| CultureInfo | ParameterCultureInfo to use for localization | CultureInfo | CultureInfo for Locale |
| ShowTime | ParameterShow time or not. When boolean, it sets ShowTime to the boolean. When string, it sets ShowTime to true and uses the string value as the time format. |
OneOf<Boolean, String> | -- |
| AllowClear | ParameterAllow clearing the selected value or not | Boolean | true |
| Placeholder | ParameterPlaceholder for input | OneOf<String, String[]> | -- |
| PopupStyle | ParameterStyle applied to popup | String | -- |
| ClassName | ParameterPicker class name | String | -- |
| DropdownClassName | ParameterClass name for popover dropdown | String | -- |
| Format | ParameterFormat for the DateTime display | String | -- |
| DefaultValue | ParameterDefault value | TValue | -- |
| DefaultPickerValue | ParameterDefault value of the picker | TValue | -- |
| SuffixIcon | ParameterCustom suffix icon | RenderFragment | -- |
| Ranges | ParameterRange selection presets to allow the user to select a range with one button click | Dictionary<String, Nullable`1[]> | -- |
| RenderExtraFooter | ParameterExtra content to display in picker footer | RenderFragment | -- |
| OnClearClick | ParameterCallback executed when clear is clickedUse OnClear instead Obsolete Will be removed in a future version. |
EventCallback | -- |
| OnClear | ParameterCalled when clear button clicked. | EventCallback | -- |
| OnOk | ParameterCallback executed when ok is clicked | EventCallback | -- |
| OnOpenChange | ParameterCallback executed when popover calendar is opened or closed | EventCallback<Boolean> | -- |
| OnPanelChange | ParameterCallback executed when the type of panel displayed changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| DisabledDate | ParameterFunction to determine if a provided date should be disabled | Func<DateTime, Boolean> | -- |
| DisabledHours | ParameterFunction to determine if a hours in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledMinutes | ParameterFunction to determine if a minutes in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledSeconds | ParameterFunction to determine if a seconds in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledTime | ParameterFunction to determine what pieces of time should be disabled in a date | Func<DateTime, DatePickerDisabledTime> | -- |
| DateRender | ParameterCustom rendering for date cells | Func<DateTime, DateTime, RenderFragment> | -- |
| MonthCellRender | ParameterCustom rendering for month cells | Func<DateTime, RenderFragment> | -- |
| Placement | ParameterThe position where the selection box pops up | Placement | -- |
| Use12Hours | ParameterWhen true, will use 12 hour time. When false will use 24 hour time | Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | TValue | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<TValue> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<TValue>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<TValue>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.Default |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| FocusAsync() | Task | Add focus to picker input |
| BlurAsync() | Task | Remove focus from picker input |
| Close() | void | Close the popover |
QuarterPicker API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| OnChange | ParameterCallback executed when the selected value changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| ChangeOnClose | ParameterSaving the input value after blur | Boolean | -- |
| Picker | ParameterSet picker type | DatePickerType | -- |
| PopupContainerSelector | ParameterSelector for placing the container of the popup in | String | -- |
| Disabled | ParameterDisable the date picker. When given a single boolean, it will disable all of it. When given an array of booleans, it represents disabling the start/end of a range: [start, end] | OneOf<Boolean, Boolean[]> | -- |
| BoundaryAdjustMode | ParameterOverlay adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | -- |
| Bordered | ParameterShow a border or not | Boolean | true |
| AutoFocus | ParameterAutofocus on the input or not | Boolean | false |
| Open | ParameterIf the picker is open or not | Boolean | false |
| InputReadOnly | ParameterIf the picker is read-only or not | Boolean | false |
| ShowToday | ParameterWhether to show the Today button which selects Today from any date | Boolean | true |
| Mask | ParameterLocale for localizing UI strings | String | LocaleProvider.CurrentLocale.DatePicker |
| Locale | Parameter | DatePickerLocale | -- |
| CultureInfo | ParameterCultureInfo to use for localization | CultureInfo | CultureInfo for Locale |
| ShowTime | ParameterShow time or not. When boolean, it sets ShowTime to the boolean. When string, it sets ShowTime to true and uses the string value as the time format. |
OneOf<Boolean, String> | -- |
| AllowClear | ParameterAllow clearing the selected value or not | Boolean | true |
| Placeholder | ParameterPlaceholder for input | OneOf<String, String[]> | -- |
| PopupStyle | ParameterStyle applied to popup | String | -- |
| ClassName | ParameterPicker class name | String | -- |
| DropdownClassName | ParameterClass name for popover dropdown | String | -- |
| Format | ParameterFormat for the DateTime display | String | -- |
| DefaultValue | ParameterDefault value | TValue | -- |
| DefaultPickerValue | ParameterDefault value of the picker | TValue | -- |
| SuffixIcon | ParameterCustom suffix icon | RenderFragment | -- |
| Ranges | ParameterRange selection presets to allow the user to select a range with one button click | Dictionary<String, Nullable`1[]> | -- |
| RenderExtraFooter | ParameterExtra content to display in picker footer | RenderFragment | -- |
| OnClearClick | ParameterCallback executed when clear is clickedUse OnClear instead Obsolete Will be removed in a future version. |
EventCallback | -- |
| OnClear | ParameterCalled when clear button clicked. | EventCallback | -- |
| OnOk | ParameterCallback executed when ok is clicked | EventCallback | -- |
| OnOpenChange | ParameterCallback executed when popover calendar is opened or closed | EventCallback<Boolean> | -- |
| OnPanelChange | ParameterCallback executed when the type of panel displayed changes | EventCallback<DateTimeChangedEventArgs<TValue>> | -- |
| DisabledDate | ParameterFunction to determine if a provided date should be disabled | Func<DateTime, Boolean> | -- |
| DisabledHours | ParameterFunction to determine if a hours in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledMinutes | ParameterFunction to determine if a minutes in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledSeconds | ParameterFunction to determine if a seconds in a date should be disabled | Func<DateTime, Int32[]> | -- |
| DisabledTime | ParameterFunction to determine what pieces of time should be disabled in a date | Func<DateTime, DatePickerDisabledTime> | -- |
| DateRender | ParameterCustom rendering for date cells | Func<DateTime, DateTime, RenderFragment> | -- |
| MonthCellRender | ParameterCustom rendering for month cells | Func<DateTime, RenderFragment> | -- |
| Placement | ParameterThe position where the selection box pops up | Placement | -- |
| Use12Hours | ParameterWhen true, will use 12 hour time. When false will use 24 hour time | Boolean | false |
| ValidationMessages | Validation messages for the FormItem | String[] | -- |
| AdditionalAttributes | ParameterGets or sets a collection of additional attributes that will be applied to the created element. | IReadOnlyDictionary<String, Object> | -- |
| Value | ParameterGets or sets the value of the input. This should be used with two-way binding. | TValue | -- |
| ValueChanged | ParameterCallback that updates the bound value. | EventCallback<TValue> | -- |
| ValueExpression | ParameterAn expression that identifies the bound value. | Expression<Func<TValue>> | -- |
| ValuesExpression | ParameterAn expression that identifies the enumerable of bound values. | Expression<Func<IEnumerable<TValue>>> | -- |
| Size | ParameterThe size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | String | AntSizeLDSType.Default |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| FocusAsync() | Task | Add focus to picker input |
| BlurAsync() | Task | Remove focus from picker input |
| Close() | void | Close the popover |
TriggerBoundaryAdjustMode API#
Underlying Type: Int32
| Name | Description |
|---|---|
| None | Do not auto adjust |
| InView | The default, the viewport boundaries are the boundaries that are used for calculation if overlay is fully visible. Attempt to fit the overlay so it is always fully visible in the viewport. So if the overlay is outside of the viewport ("overflows"), then reposition calculation is going to be attempted. |
| InScroll | The document boundaries are the boundaries used for calculation if overlay needs to be reposition. So even if the overlay is outside of the viewport, the overlay may still be shown as long as it does not "overflow" the document boundaries. |