Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Flag New Form field Highlight Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation Smart search New
Icons
Interface and examples language
English
Version
20.3.0
Datepicker
Source code

A date field (datepicker) is a special input field with a widget for selecting a date.

States
Inactive field
Required

If the date field is required, use the required parameter.

Usage examples
Date selection restriction

The range is configured with two separate pairs of bindings, and both are needed:

  • minDate / maxDate on <kbq-datepicker> restrict the calendar — out-of-range days are not selectable.
  • min / max on the <input> drive validation, including dates typed with the keyboard or pasted. A value outside the range is still written to the form control, and the control is marked invalid with kbqDatepickerMin or kbqDatepickerMax.

Validation requires a form control on the input (ngModel, formControl or formControlName) — without one the validators never run.

min and max are compared with the time part included rather than by calendar day, because the input keeps the time of the value it parses. Set the lower bound to the start of the first allowed day and the upper bound to the end of the last allowed day, so that both boundary days stay valid.

Date range

There is no dedicated date range widget, so use separate input fields to specify the boundaries.

Using Datepicker and Timepicker together
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.