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

Usage

import { HlmDatePicker } 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.
date	T[]	-	The selected value.
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.

Outputs

Prop	Type	Default	Description
dateChange	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.
date	T	-	The selected value.
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.

Outputs

Prop	Type	Default	Description
dateChange	T	-	-

HlmDateRangePicker

Selector: hlm-date-range-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.
date	[T, T]	-	The selected value.
autoCloseOnEndSelection	boolean	this._config.autoCloseOnEndSelection	If true, the date picker will close when the end date is selected
formatDates	(dates: [T \| undefined, T \| undefined]) => string	this._config.formatDates	Defines how the date should be displayed in the UI.
transformDates	(date: [T, T]) => [T, T]	this._config.transformDates	Defines how the date should be transformed before saving to model/form.

Outputs

Prop	Type	Default	Description
dateChange	[T, T] \| null	-	-

Examples

Custom Configs

Use provideHlmDatePickerConfig to provide custom configs for the date picker component throughout the application.

autoCloseOnSelect: boolean; if true , 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);
}

Range Picker

Use hlm-date-range-picker for range date selection. Set the range by using startDate and endDate inputs.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HlmDateRangePicker } from '@spartan-ng/helm/date-picker';

@Component({
	selector: 'spartan-date-picker-range',
	imports: [HlmDateRangePicker, FormsModule],
	template: `
		<hlm-date-range-picker [min]="minDate" [max]="maxDate" [autoCloseOnEndSelection]="true">
			<span>Enter a date range</span>
		</hlm-date-range-picker>
	`,
})
export class DatePickerRangeExample {
	/** 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);
	}
}

Form Range Picker

Sync the dates to a form by adding formControlName to hlm-date-range-picker .

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmDateRangePicker } from '@spartan-ng/helm/date-picker';
import { HlmLabel } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-date-picker-form-range',
	imports: [ReactiveFormsModule, HlmButton, HlmLabel, HlmDateRangePicker],
	template: `
		<form [formGroup]="form" (ngSubmit)="submit()" class="space-y-8">
			<label hlmLabel>
				Enter a date range
				<hlm-date-range-picker [min]="minDate" [max]="maxDate" formControlName="range" [autoCloseOnEndSelection]="true">
					<span>Enter a date range</span>
				</hlm-date-range-picker>
			</label>

			<button type="submit" hlmBtn [disabled]="form.invalid">Submit</button>
		</form>
	`,
})
export class DatePickerFormRangeExample {
	private readonly _formBuilder = inject(FormBuilder);

	public form = this._formBuilder.group({
		range: [[], [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);
	}

	constructor() {
		this.form.get('range')?.valueChanges.subscribe(console.log);
	}
}

Dialog

Data Table

Spartans get ready! v1 is coming!

Getting Started

Stack

UI

Components

Date Picker

Installation

Usage

Helm API

HlmDatePickerMulti

Inputs

Outputs

HlmDatePicker

Inputs

Outputs

HlmDateRangePicker

Inputs

Outputs

Examples

Custom Configs

Multiple Selection

Range Picker

Format Date

Form

Form Multiple Selection

Form Range Picker

On this page