Date Picker
Date picker with an animated calendar popover, single date and range selection, min/max constraints, disabled days, custom formatting and a clear button.
Installation
Install via CLI
npx @moontra/moonui-cli add date-pickerUsage
Examples
Basic Date Picker
Single date selection with an animated calendar popover
Date Range Picker
Select a start and end date with DateRangePicker
Date and Time Picker
DateTimePicker pairs the calendar with a time selector; the time list is driven by timeInterval and only appears once a date is chosen
No date and time selected yet
Month Picker
MonthPicker selects a whole month instead of a day — useful for billing periods, reports and archives
No month selected yet
Custom Format
Control how the selected date is displayed with a date-fns format string
Date Constraints
Limit the selectable range with minDate and maxDate
Disabled Weekends
Disable specific weekdays with disabledDaysOfWeek (0 = Sunday, 6 = Saturday)
Form Integration
Two date pickers combined inside a form layout