Dasar UI Library

Datepicker

A fully featured date selection component utilizing Dasar Calendar internally, supporting smart placement, localization, and rich custom templating.

Basic Usage

Select a Date

Choose your birth date

Returned Value: None

Appearance & Sizes

Outline (Default)

Select date

Filled Appearance

Select date

Subtle Appearance

Select date

Small Size

Select date

Medium Size

Select date

Large Size

Select date

Formatting & Locales

Indonesian Format (id-ID)

17 Agustus 2026

Displays as: 17 Agustus 1945

Bound output: 2026-08-17

American Format (en-US)

10/01/2026

Outputs the raw JS Date timestamp

Bound output: 1790826377020

Validation & States

Clearable Field

01-10-2026

Error State

Select date

Please select a valid date in the future.

Disabled State

Select date

You cannot interact with this field.

Smart Placements

Bottom Start (Default)

Select date

Top End

Select date

Dropdown opens upwards and aligns right.

Custom Content Slots

Meeting Date

*Required

Select date

Select a date during business days.

Dropdown Footer Actions

With Footer Actions

Select a date

API Reference

Property	Type	Default	Description
`value`	`any`	null	The currently selected date. Supports Angular two-way binding [(value)] and Reactive Forms.
`display-format`	`string`	'DD-MM-YYYY'	The date format shown in the input trigger (e.g., dd MMMM yyyy).
`value-format`	`string`	'yyyy-MM-dd'	The format of the returned value. Accepts date-fns strings, "iso", or "timestamp".
`locale`	`string`	'en-US'	Locale used for formatting month names, weekdays, etc. (e.g., id-ID).
`appearance`	`'outline' \| 'filled' \| 'subtle'`	'outline'	The visual style of the trigger input.
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Controls the height and typographic scale of the input.
`placement`	`DasarDatepickerPlacement`	'bottom-start'	Preferred dropdown position. Auto-flips if there is no space.
`clearable`	`boolean`	false	Displays an "x" icon to clear the selected date when hovered.
`disabled`	`boolean`	false	Disables user interaction.
`error`	`boolean`	false	Applies an error validation style to the input and hint text.
`full-width`	`boolean`	false	Forces the host element to 100% width.
`label / extra-label / hint`	`string`	undefined	Helper text rendered around the component.
`(valueChange) / (dateSelected)`	`EventEmitter<any>`	-	Emitted when a date is selected.
`[...-slot]`	`Content Slot`	-	Directives like [prefix-slot], [label-slot], [extra-footer-slot] to project custom HTML.