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
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Input Height | 40-48px |
| Border Width | 1px |
| Border Radius | 16px |
| Calendar Icon | 20-24px |
| Font Size | 14-16px |
| Primary Color | Brand color (#001A41) |
States
Section titled “States”Standard input with placeholder
Grey, read-only, not interactive
Calendar popup displayed
Configuration Options
Section titled “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
Section titled “Locale Support”| Setting | Value |
|---|---|
| Locale | id (Indonesian) |
| Date Adapter | MomentDateAdapter |
| Format | DD/MM/YYYY |
Form Integration
Section titled “Form Integration”- Reactive Forms compatible via
ControlValueAccessor - Supports
NG_VALUE_ACCESSOR writeValue(),registerOnChange(),registerOnTouched()implementedsetDisabledState()for programmatic disable
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Date of birth fields
- Appointment scheduling
- Date range selection
- Form date inputs
Best practices
Section titled “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 |