On this page
Angular Date Picker Component
Create consistent cross-browser and cross-device Angular date picker.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
| name | description | type | default |
| ---- | ----------- | ---- | ------- |
| `date` | Initial selected date. | `Date` | _undefined_ |
| `calendarDate` | Default date month of the component. | `Date` | _undefined_ |
| `cleaner` | Toggle visibility or set the content of the cleaner button. | `boolean` | _true_ |
| `closeOnSelect` | Determine if dropdown should be closed when component value is set. | `boolean` | _false_ |
| `disabled` | Toggle the disabled state for the component. | `boolean` | _false_ |
| `disabledDates` | List of dates that cannot be selected. | `(Date` \| `Date[])[]` | _undefined_ |
| `firstDayOfWeek` | Sets the day of start week. | `number` | _1_ |
| `format`
##### Outputs
4.5.26+
| Formats a date display. See: DatePipe format options. Makes the input read-only.| `string` | _undefined_ |
| `disabled` | Toggle the disabled state for the component. | `boolean` | _false_ |
| `indicator` | Toggle visibility or set the content of the input indicator. | `boolean` | _true_ |
| `inputReadOnly` | Toggle the readonly state for the input. | `boolean` | _false_ |
| `locale` | Sets the default locale for components. If not set, it is inherited from the browser. | `string` | _default_ |
| `maxDate` | Max selectable date. | `Date` | _undefined_ |
| `minDate` | Min selectable date. | `Date` | _undefined_ |
| `navYearFirst` | Reorder year-month navigation, and render year first. | `boolean` | _false_ |
| `navigation` | Show arrows navigation. | `boolean` | _true_ |
| `placeholder` | Specifies hint visible in date input. | `string` | _Select date_ |
| `size` | Size the component input small or large. | `sm` \| `lg` | _undefined_ |
| `dayFormat` | Set the format of day number. | `numeric` \| `2-digit` \| `(date: Date) => string \| number` | _numeric_ |
| `weekdayFormat` | Set length or format of day name, | `number` \| `long` \| `narrow` \| `short` | _2_ |
| `selectAdjacentDays`4.5.5+
| Days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacentDays` option is set to `true`. | `boolean` | _false_ |
| `showAdjacentDays`4.5.5+
| Display dates in adjacent months (non-selectable) at the start/end of the current month. | `boolean` | _true_ |
| `valid` | Set input validation visual feedback. | `boolean` | _undefined_ |
| `showWeekNumber` | Display ISO week numbers in month view. | `boolean` | _undefined_ |
| `weekNumbersLabel` | Label displayed over week numbers in the calendar. | `string` | _undefined_ |
| `inputDateFormat` | Custom function to format the selected date into a string according to a custom format. | `(date: Date) => string` | _undefined_ |
| `inputDateParse` | Custom function to parse the input value into a valid Date object. | `(date: string | Date) => Date` | _undefined_ |
| name | description | type |
| ---- | ----------- | ---- |
| `dateChange` | Event emitted on `date` change | `Date` |
| `calendarCellHover` | Event emitted on calendar cell hover | `Date` |
| `calendarDateChange` | Event emitted on calendar month change | `Date` |
| `valueChange` | Event emitted on `value` change | `Date` |