Date Picker
A date picker component.
import { Component } from '@angular/core';
import { HlmDatePicker } from '@spartan-ng/helm/date-picker';
@Component({
selector: 'spartan-date-picker-preview',
imports: [HlmDatePicker],
template: `
<hlm-date-picker [min]="minDate" [max]="maxDate">
<span>Select date</span>
</hlm-date-picker>
`,
})
export class DatePickerPreview {
/** The minimum date */
public minDate = new Date(2023, 0, 1);
/** The maximum date */
public maxDate = new Date(2030, 11, 31);
}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
import { HlmDatePickerComponent } from '@spartan-ng/helm/date-picker';<hlm-date-picker [min]="minDate" [max]="maxDate">
<span>Pick a date</span>
</hlm-date-picker>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. |
| date | T[] | - | The selected value. |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| changed | T[] | - | - |
| dateChanged | T[] | - | The selected value. |
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. |
| date | T | - | The selected value. |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| changed | T | - | - |
| dateChanged | T | - | The selected value. |
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.
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HlmDatePicker, provideHlmDatePickerConfig } from '@spartan-ng/helm/date-picker';
import { DateTime } from 'luxon';
@Component({
selector: 'spartan-date-picker-config',
imports: [HlmDatePicker, FormsModule],
template: `
<hlm-date-picker [min]="minDate" [max]="maxDate">
<span>Pick a date</span>
</hlm-date-picker>
`,
providers: [
provideHlmDatePickerConfig({
formatDate: (date: Date) => DateTime.fromJSDate(date).toFormat('dd.MM.yyyy'),
transformDate: (date: Date) => DateTime.fromJSDate(date).plus({ days: 1 }).toJSDate(),
}),
],
})
export class DatePickerConfigExample {
/** The minimum date */
public minDate = new Date(2023, 0, 1);
/** The maximum date */
public maxDate = new Date(2030, 11, 31);
}Multiple Selection
Use hlm-date-picker-multi for multiple date selection. Limit the selectable dates using minSelection and maxSelection inputs.
import { Component } from '@angular/core';
import { HlmDatePickerMulti } from '@spartan-ng/helm/date-picker';
@Component({
selector: 'spartan-date-picker-multiple',
imports: [HlmDatePickerMulti],
template: `
<hlm-date-picker-multi
[min]="minDate"
[max]="maxDate"
[autoCloseOnMaxSelection]="true"
[minSelection]="2"
[maxSelection]="6"
>
<span>Pick dates</span>
</hlm-date-picker-multi>
`,
})
export class DatePickerMultipleExample {
/** The minimum date */
public minDate = new Date(2023, 0, 1);
/** The maximum date */
public maxDate = new Date(2030, 11, 31);
}Format Date
Use formatDate input to override the global date format for the date picker component.
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HlmDatePicker, provideHlmDatePickerConfig } from '@spartan-ng/helm/date-picker';
import { DateTime } from 'luxon';
@Component({
selector: 'spartan-date-picker-format',
imports: [HlmDatePicker, FormsModule],
template: `
<hlm-date-picker [min]="minDate" [max]="maxDate" [formatDate]="formatDate">
<span>Pick a date</span>
</hlm-date-picker>
`,
providers: [
// Global formatDate config
provideHlmDatePickerConfig({ formatDate: (date: Date) => DateTime.fromJSDate(date).toFormat('dd.MM.yyyy') }),
],
})
export class DatePickerFormatExample {
/** The minimum date */
public minDate = new Date(2023, 0, 1);
/** The maximum date */
public maxDate = new Date(2030, 11, 31);
/** Overrides global formatDate */
public formatDate = (date: Date) => DateTime.fromJSDate(date).toFormat('MMMM dd, yyyy');
}Form
Sync the date to a form by adding formControlName to hlm-date-picker .
import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmDatePicker } from '@spartan-ng/helm/date-picker';
import { HlmLabel } from '@spartan-ng/helm/label';
@Component({
selector: 'spartan-date-picker-form',
imports: [HlmDatePicker, ReactiveFormsModule, HlmButton, HlmLabel],
template: `
<form [formGroup]="form" (ngSubmit)="submit()" class="space-y-8">
<label hlmLabel>
Date of birth
<hlm-date-picker [min]="minDate" [max]="maxDate" formControlName="birthday" [autoCloseOnSelect]="true">
<span>Pick a date</span>
</hlm-date-picker>
</label>
<button type="submit" hlmBtn>Submit</button>
</form>
`,
})
export class DatePickerFormExample {
private readonly _formBuilder = inject(FormBuilder);
public form = this._formBuilder.group({
birthday: [null, Validators.required],
});
/** The minimum date */
public minDate = new Date(2023, 0, 1);
/** The maximum date */
public maxDate = new Date(2030, 11, 31);
submit() {
console.log(this.form.value);
}
}Form Multiple Selection
Sync the dates to a form by adding formControlName to hlm-date-picker-multi .
import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmDatePickerMulti } from '@spartan-ng/helm/date-picker';
import { HlmLabel } from '@spartan-ng/helm/label';
@Component({
selector: 'spartan-date-picker-form-multiple',
imports: [HlmDatePickerMulti, ReactiveFormsModule, HlmButton, HlmLabel],
template: `
<form [formGroup]="form" (ngSubmit)="submit()" class="space-y-8">
<label hlmLabel>
Available dates
<hlm-date-picker-multi
[min]="minDate"
[max]="maxDate"
formControlName="availableDates"
[autoCloseOnMaxSelection]="true"
[minSelection]="2"
[maxSelection]="4"
>
<span>Pick dates</span>
</hlm-date-picker-multi>
</label>
<button type="submit" hlmBtn [disabled]="form.invalid">Submit</button>
</form>
`,
})
export class DatePickerFormMultipleExample {
private readonly _formBuilder = inject(FormBuilder);
public form = this._formBuilder.group({
availableDates: [[], Validators.required],
});
/** The minimum date */
public minDate = new Date(2023, 0, 1);
/** The maximum date */
public maxDate = new Date(2030, 11, 31);
submit() {
console.log(this.form.value);
}
}