Date Picker is a popover control for picking a date value for a date input. It's also sometimes referred to as Datepicker.
Date Picker is a calendar-view popover. It is paired with a text input so that it can send a formatted date value to the input.
Date Picker is shown by clicking, or gaining focus and hitting enter, on the calendar icon next to the input field.
Today’s date is displayed in bold. Unless preloaded with another date, today’s date will be selected in the Date Picker.
Clicking on the check-calendar icon inside the Date Picker returns the focus to today’s date.
Focus is indicated by a grey background. Focus can be moved around inside the Date Picker using arrow and tab keys. Clicking the enter key will select a value.
A Date Picker is used to select a date when a user needs to understand the date in context with other possible dates. Date choices are influenced by day of the week, or week within a month. A Date Picker is also helpful when the formatting of the date is important.
Date Pickers aren’t helpful when the date is a known value like a birthdate. A user will likely want to type that value in versus hunting for it in a Date Picker. In cases where space is limited, it may be a good idea to omit the Date Picker.
The Month and Year views are shown when a user clicks on the month or year titles in the date view.
12 month values can be selected from. Arrow keys can be used to navigate through the values. Selecting a month value will return the user back to the date view.
10 year values are displayed at one time. Arrow keys can be used to navigate through the values, future years, and past years. Selecting a year value will return the user back to the date view.
We automatically disable the Clarity Date Picker on small mobile phones. This is done because unlike desktop browsers, most mobile browsers have a built-in date picker. These built-in date pickers are optimized to work on mobile devices and provide an experience which the user is already familiar with.
Important Notes about User Input
- Every time the user changes the value in the input field, the value is validated against the placeholder to check if a valid date is entered or not. If a valid date is entered, the date picker opens with the entered date selected. If an invalid date is entered, the date picker opens with the focus on today's date.
- Selecting a date from the date picker overrides the value in the input field.
- Date picker ideally requires a 4 digit year but can convert a 2 digit year input by the user to a 4 digit year. For eg: a 2 digit year 20 will convert to 2020. If the 4 digit conversion is 20 more than the current year, we subtract 100 from it. If the current year is 2018 and the year input is 99, then the converted year is 1999. Anything other than a 4 digit or 2 digit year is considered invalid.
Code & Examples
To use the date picker, add the
clrDate directive on an
<form clrForm clrLayout="vertical"> <input type="date" clrDate name="demo" [(ngModel)]="demo"> </form>
dateas it increases readability of your code, helps with SEO, and keeps your HTML markup semantic. When the date picker is enabled, this
typeis overriden to
textto disable the built-in date pickers that some desktop browsers provide.
Clarity uses the locale identifiers supported by Angular for getting the date format, first day of the week, month and day names. These values are used to generate the input field placeholder and the calendar.
Using the date format retrieved from Angular, the placeholder is generated in one of the following formats:
- big-endian (YYYY/MM/DD)
- little-endian (DD/MM/YYYY)
- middle-endian (MM/DD/YYYY)
The following demo shows two date pickers. The first date picker uses the
en-US locale idenitifier whereas the second one uses
fr. Both the date pickers have different first day of the week and the calendar is generated based on the first day of the week.
Locale Identifier: en-US
|First Day of the Week (Retrieved from Angular)||Sunday (S)|
|Date Format (Retrieved from Angular)||M/d/yy|
Locale Idenitifer: fr
|First Day of the Week (Retrieved from Angular)||Monday (L)|
|Date Format (Retrieved from Angular)||dd/MM/y|
By default, Angular uses the
en-US locale but you can set your application's locale to a different value using the
--locale parameter while building your Angular CLI application.
For more information on setting the locale parameter and loading the locale data, please read the Angular internationalization documentation.
Accessing the Date
You can access the Date in two ways:
You can add a two way binding on
2. As a date string (in current locale format)
Template Driven Forms use the
ngModel directive to create a binding between the model and the input field.
Reactive Forms use
FormControls to create the binding between the model and the input field.
Summary of Options
|String||NA||Tells control to render with new forms layout support.|