The Datepicker component provides an intuitive calendar interface for selecting dates with support for single dates, date ranges, and various constraints.
Basic usage
<flx-datepicker
label="Birth date"
[(ngModel)]="birthDate">
</flx-datepicker>
Properties
Label text displayed above the datepicker
placeholder
string
default:"Select date"
Placeholder text when no date is selected
Selected date or date range
mode
'single' | 'range'
default:"single"
Selection mode: single date or date range
Marks the field as required
error
boolean | string
default:"false"
Shows error state
Array of dates that cannot be selected
format
string
default:"MM/dd/yyyy"
Date display format
First day of week (0 = Sunday, 1 = Monday, etc.)
Shows button to clear selection
Events
valueChange
EventEmitter<Date | DateRange>
Emitted when the selected date changes
Emitted when calendar opens
Emitted when calendar closes
Examples
Single date
Date range
With constraints
Custom format
Reactive forms
Week starts Monday
<flx-datepicker
label="Appointment date"
placeholder="Select a date"
[(ngModel)]="appointmentDate">
</flx-datepicker>
export class AppointmentForm {
appointmentDate = new Date();
}
<flx-datepicker
label="Travel dates"
mode="range"
placeholder="Select start and end dates"
[(ngModel)]="travelDates">
</flx-datepicker>
export class TravelBooking {
travelDates = {
start: new Date(),
end: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // 7 days later
};
}
<flx-datepicker
label="Event date"
[(ngModel)]="eventDate"
[minDate]="today"
[maxDate]="maxEventDate"
[disabledDates]="holidays">
</flx-datepicker>
export class EventScheduler {
today = new Date();
maxEventDate = new Date(Date.now() + 90 * 24 * 60 * 60 * 1000); // 90 days
eventDate: Date;
holidays = [
new Date('2024-12-25'),
new Date('2024-01-01')
];
}
<flx-datepicker
label="Date"
[(ngModel)]="date"
format="yyyy-MM-dd">
</flx-datepicker>
<flx-datepicker
label="Date"
[(ngModel)]="date2"
format="dd MMMM yyyy">
</flx-datepicker>
<flx-datepicker
label="Date"
[(ngModel)]="date3"
format="MMM d, yy">
</flx-datepicker>
<form [formGroup]="bookingForm">
<flx-datepicker
label="Check-in date"
formControlName="checkIn"
[minDate]="today"
[error]="checkInControl.invalid && checkInControl.touched">
</flx-datepicker>
<flx-datepicker
label="Check-out date"
formControlName="checkOut"
[minDate]="checkInControl.value"
[error]="checkOutControl.invalid && checkOutControl.touched">
</flx-datepicker>
</form>
import { FormBuilder, Validators } from '@angular/forms';
export class BookingForm {
today = new Date();
bookingForm = this.fb.group({
checkIn: [null, Validators.required],
checkOut: [null, Validators.required]
});
get checkInControl() { return this.bookingForm.get('checkIn')!; }
get checkOutControl() { return this.bookingForm.get('checkOut')!; }
constructor(private fb: FormBuilder) {}
}
<flx-datepicker
label="Date"
[(ngModel)]="date"
[firstDayOfWeek]="1">
</flx-datepicker>
Styling
flx-datepicker {
--flx-datepicker-input-height: 40px;
--flx-datepicker-border-radius: 4px;
--flx-datepicker-border-color: #d1d5db;
--flx-datepicker-calendar-background: #ffffff;
--flx-datepicker-day-size: 36px;
--flx-datepicker-day-border-radius: 50%;
--flx-datepicker-selected-background: #3b82f6;
--flx-datepicker-selected-color: #ffffff;
--flx-datepicker-today-border-color: #3b82f6;
--flx-datepicker-disabled-color: #9ca3af;
--flx-datepicker-range-background: #dbeafe;
}
Accessibility
The Datepicker component is fully accessible:
- Keyboard navigation (Arrow keys, Enter, Escape)
role="dialog" for calendar popuparia-label for date buttons- Screen reader announcements for date selection
- Focus management and trapped focus in calendar
Best practices
- Set appropriate
minDate and maxDate constraints
- Use
disabledDates for unavailable dates (holidays, blackout dates)
- Provide clear labels indicating the expected date format
- For date ranges, validate that end date is after start date
- Use consistent date formats across your application
- Consider timezone implications for date-only selections
When using date ranges, consider setting the minDate of the end date picker to the selected start date to prevent invalid ranges.
- Input - For manual date entry