Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

Date Picker

A date picker component.

Date of birth

import { Component } from '@angular/core';
import { HlmDatePickerImports } from '@spartan-ng/helm/date-picker';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-date-picker-preview',
	imports: [HlmDatePickerImports, HlmLabelImports],
	template: `
		<div class="flex flex-col gap-3">
			<label for="date" hlmLabel class="px-1">Date of birth</label>
			<hlm-date-picker buttonId="date" [min]="minDate" [max]="maxDate">
				<span>Select date</span>
			</hlm-date-picker>
		</div>
	`,
})
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 date-picker

Usage

import { HlmDatePickerImports } from '@spartan-ng/helm/date-picker';

<hlm-date-picker [min]="minDate" [max]="maxDate">
	<span>Pick a date</span>
</hlm-date-picker>

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.

Date Picker with Config

import { Component } from '@angular/core';
import { HlmDatePickerImports, provideHlmDatePickerConfig } from '@spartan-ng/helm/date-picker';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { DateTime } from 'luxon';

@Component({
	selector: 'spartan-date-picker-config',
	imports: [HlmDatePickerImports, HlmLabelImports],
	template: `
		<div class="flex flex-col gap-3">
			<label for="customConfig" hlmLabel class="px-1">Date Picker with Config</label>
			<hlm-date-picker buttonId="customConfig" [min]="minDate" [max]="maxDate">
				<span>Pick a date</span>
			</hlm-date-picker>
		</div>
	`,
	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.

Date Picker Multiple

import { Component } from '@angular/core';
import { HlmDatePickerImports } from '@spartan-ng/helm/date-picker';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-date-picker-multiple',
	imports: [HlmDatePickerImports, HlmLabelImports],
	template: `
		<div class="flex flex-col gap-3">
			<label for="datePickerMulti" hlmLabel class="px-1">Date Picker Multiple</label>
			<hlm-date-picker-multi
				buttonId="datePickerMulti"
				[min]="minDate"
				[max]="maxDate"
				[autoCloseOnMaxSelection]="true"
				[minSelection]="2"
				[maxSelection]="6"
			>
				<span>Pick dates</span>
			</hlm-date-picker-multi>
		</div>
	`,
})
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 { HlmDatePickerImports } from '@spartan-ng/helm/date-picker';

@Component({
	selector: 'spartan-date-picker-range',
	imports: [HlmDatePickerImports, 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.

Date Picker with Custom Format

import { Component } from '@angular/core';
import { HlmDatePickerImports, provideHlmDatePickerConfig } from '@spartan-ng/helm/date-picker';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { DateTime } from 'luxon';

@Component({
	selector: 'spartan-date-picker-format',
	imports: [HlmDatePickerImports, HlmLabelImports],
	template: `
		<div class="flex flex-col gap-3">
			<label for="datePickerFormat" hlmLabel class="px-1">Date Picker with Custom Format</label>
			<hlm-date-picker buttonId="datePickerFormat" [min]="minDate" [max]="maxDate" [formatDate]="formatDate">
				<span>Pick a date</span>
			</hlm-date-picker>
		</div>
	`,
	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');
}

Date and Time picker

Date

Time

import { Component } from '@angular/core';
import { HlmDatePickerImports } from '@spartan-ng/helm/date-picker';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-date-and-time-picker',
	imports: [HlmDatePickerImports, HlmLabelImports, HlmInputImports],
	template: `
		<div class="flex gap-4">
			<div class="flex flex-col gap-3">
				<label for="date-picker" hlmLabel class="px-1">Date</label>
				<hlm-date-picker buttonId="date-picker" [min]="minDate" [max]="maxDate">
					<span>Select date</span>
				</hlm-date-picker>
			</div>

			<div class="flex flex-col gap-3">
				<label for="time-picker" hlmLabel class="px-1">Time</label>
				<input
					hlmInput
					id="time-picker"
					type="time"
					step="1"
					[defaultValue]="'10:30:00'"
					class="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
				/>
			</div>
		</div>
	`,
})
export class DateAndTimePickerExample {
	/** The minimum date */
	public minDate = new Date(2023, 0, 1);

	/** The maximum date */
	public maxDate = new Date(2030, 11, 31);
}

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 { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmDatePickerImports } from '@spartan-ng/helm/date-picker';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-date-picker-form',
	imports: [HlmDatePickerImports, ReactiveFormsModule, HlmButtonImports, HlmLabelImports],
	template: `
		<form [formGroup]="form" (ngSubmit)="submit()" class="space-y-8">
			<div class="flex flex-col gap-2">
				<label for="birthday" hlmLabel class="px-1">Date of birth</label>
				<hlm-date-picker
					buttonId="birthday"
					[min]="minDate"
					[max]="maxDate"
					formControlName="birthday"
					[autoCloseOnSelect]="true"
				>
					<span>Pick a date</span>
				</hlm-date-picker>
				<div class="text-muted-foreground px-1 text-sm">Your date of birth is used to calculate your age.</div>
			</div>

			<button type="submit" hlmBtn [disabled]="form.invalid">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 { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmDatePickerImports } from '@spartan-ng/helm/date-picker';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-date-picker-form-multiple',
	imports: [HlmDatePickerImports, ReactiveFormsModule, HlmButtonImports, HlmLabelImports],
	template: `
		<form [formGroup]="form" (ngSubmit)="submit()" class="space-y-8">
			<div class="flex flex-col gap-2">
				<label for="availableDates" hlmLabel class="px-1">Available dates</label>
				<hlm-date-picker-multi
					buttonId="availableDates"
					[min]="minDate"
					[max]="maxDate"
					formControlName="availableDates"
					[autoCloseOnMaxSelection]="true"
					[minSelection]="2"
					[maxSelection]="4"
				>
					<span>Pick dates</span>
				</hlm-date-picker-multi>
			</div>

			<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 { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmDatePickerImports } from '@spartan-ng/helm/date-picker';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-date-picker-form-range',
	imports: [ReactiveFormsModule, HlmButtonImports, HlmLabelImports, HlmDatePickerImports],
	template: `
		<form [formGroup]="form" (ngSubmit)="submit()" class="space-y-8">
			<div class="flex flex-col gap-2">
				<label for="dateRange" hlmLabel class="px-1">Enter a date range</label>
				<hlm-date-range-picker
					buttonId="dateRange"
					[min]="minDate"
					[max]="maxDate"
					formControlName="range"
					[autoCloseOnEndSelection]="true"
				>
					<span>Enter a date range</span>
				</hlm-date-range-picker>
			</div>

			<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);
	}
}

Helm API

HlmDatePickerMulti

Selector: hlm-date-picker-multi

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-
buttonId	string	`hlm-date-picker-multi-${++nextId}`	The id of the button that opens the date picker.
captionLayout	'dropdown' \| 'label' \| 'dropdown-months' \| 'dropdown-years'	label	Show dropdowns to navigate between months or years.
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	-	-
buttonId	string	`hlm-date-picker-${++nextId}`	The id of the button that opens the date picker.
captionLayout	'dropdown' \| 'label' \| 'dropdown-months' \| 'dropdown-years'	label	Show dropdowns to navigate between months or years.
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	-	-
buttonId	string	`hlm-date-picker-range-${++nextId}`	The id of the button that opens the date picker.
captionLayout	'dropdown' \| 'label' \| 'dropdown-months' \| 'dropdown-years'	label	Show dropdowns to navigate between months or years.
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	-	-

Dialog

Data Table