Date Picker
A date picker component.
Installation
The Date Picker component is built with the Popover and the Calendar components.
npx nx g @spartan-ng/cli:ui datepicker
ng g @spartan-ng/cli:ui datepicker
Usage
Helm API
HlmDatePickerMulti
Selector: hlm-date-picker-multi
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
| min | T | - | The minimum date that can be selected. |
| max | T | - | The maximum date that can be selected. |
| minSelection | number | undefined | The minimum selectable dates. |
| maxSelection | number | undefined | The maximum selectable dates. |
| disabled | boolean | false | Determine if the date picker is disabled. |
| autoCloseOnMaxSelection | boolean | this._config.autoCloseOnMaxSelection | If true, the date picker will close when the max selection of dates is reached.. |
| formatDates | (date: T[]) => string | this._config.formatDates | Defines how the date should be displayed in the UI. |
| transformDates | (date: T[]) => T[] | this._config.transformDates | Defines how the date should be transformed before saving to model/form. |
Models
| Prop | Type | Default | Description |
|---|---|---|---|
| date | T[] | - | The selected value. |
Outputs
| Prop | Type | Description |
|---|---|---|
| changed | T[] | - |
HlmDatePicker
Selector: hlm-date-picker
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
| min | T | - | The minimum date that can be selected. |
| max | T | - | The maximum date that can be selected. |
| disabled | boolean | false | Determine if the date picker is disabled. |
| autoCloseOnSelect | boolean | this._config.autoCloseOnSelect | If true, the date picker will close when a date is selected. |
| formatDate | (date: T) => string | this._config.formatDate | Defines how the date should be displayed in the UI. |
| transformDate | (date: T) => T | this._config.transformDate | Defines how the date should be transformed before saving to model/form. |
Models
| Prop | Type | Default | Description |
|---|---|---|---|
| date | T | - | The selected value. |
Outputs
| Prop | Type | Description |
|---|---|---|
| changed | T | - |
Examples
Custom Configs
Use provideHlmDatePickerConfig to provide custom configs for the date picker component throughout the application.
autoCloseOnSelect: boolean;iftrue, the date picker will close when a date is selected.formatDate: (date: T) => string;defines the default format how the date should be displayed in the UI.transformDate: (date: T) => T;defines the default format how the date should be transformed before saving to model/form.
Multiple Selection
Use hlm-date-picker-multi for multiple date selection. Limit the selectable dates using minSelection and maxSelection inputs.
Format Date
Use formatDate input to override the global date format for the date picker component.
Form
Sync the date to a form by adding formControlName to hlm-date-picker .
Form Multiple Selection
Sync the dates to a form by adding formControlName to hlm-date-picker-multi .