Datepicker Component
A sophisticated date selection component with support for single dates, ranges, and quick actions.
Basic Usage
html
<uDatepicker [(ngModel)]="date"></uDatepicker>Range Selection
Enable range selection for picking start and end dates.
html
<uDatepicker
selectionMode="range"
[(ngModel)]="dateRange"
placeholder="Select date range"
></uDatepicker>Constraints
Disable past or future dates as needed.
html
<uDatepicker
[disablePast]="true"
[showQuickActions]="false"
></uDatepicker>API Reference
Inputs
| Property | Type | Default | Description |
|---|---|---|---|
placeholder | string | 'Pick a date' | Placeholder text when no date is selected |
selectionMode | 'single' | 'range' | 'single' | Selection behavior |
align | 'left' | 'right' | 'left' | Alignment of the calendar dropdown |
showQuickActions | boolean | true | Whether to show 'Today', 'Clear', etc. |
disableFuture | boolean | false | Disable selection of future dates |
disablePast | boolean | false | Disable selection of past dates |
format | string | 'MMM d, yyyy' | Display format for selected date(s) |
Outputs
| Event | Payload | Description |
|---|---|---|
dateSelected | Date | Fired when a single date is selected |
rangeSelected | DateRange | Fired when a range is selected |