Date Picker

Date Picker

Date Picker provides a Material Design-compliant date input field with calendar popup, Indonesian locale support, and form integration.

Visual Specifications

Property	Value
Input Height	40-48px
Border Width	1px
Border Radius	4px
Calendar Icon	20-24px
Font Size	14-16px
Primary Color	Brand color (#4f46e5)

States

Default Focus Error Disabled Calendar Open

Standard input with placeholder

Brand color border, active input

Red border, validation failed

Grey, read-only, not interactive

Calendar popup displayed

Configuration Options

Option	Type	Default	Description
config	DatepickerConfig	Required	Configuration object
isError	boolean	false	Error state
isDisabled	boolean	false	Disabled state
iconCalender	string	default icon	Custom calendar icon path
onFocus	boolean	undefined	Focus state control

Locale Support

Setting	Value
Locale	id (Indonesian)
Date Adapter	MomentDateAdapter
Format	DD/MM/YYYY

Form Integration

• Reactive Forms compatible via ControlValueAccessor
• Supports NG_VALUE_ACCESSOR
• writeValue(), registerOnChange(), registerOnTouched() implemented
• setDisabledState() for programmatic disable

Usage Guidance

When to use

• Date of birth fields
• Appointment scheduling
• Date range selection
• Form date inputs

Best practices

✅ Do	❌ Don’t
Set min/max dates	Allow invalid dates
Show format hints	Leave users guessing
Use for future dates	Use for birthdates (min required)
Indonesian locale	Wrong language
Form validation	Skip error handling