Select Date Picker
A date range input component for selecting start and end dates with an interactive timeline visual.
Installation
npx chilli@latest add select-date-pickerDefault
start
nov 12, 2025
5:30PM
end
nov 17, 2025
Focused
start
nov 12, 2025
5:30PM
end
nov 17, 2025
With Helper Text
start
nov 12, 2025
5:30PM
end
nov 17, 2025
your action will be available during 7 days
Interactive
start
nov 12, 2025
5:30PM
end
nov 17, 2025
API Reference
SelectDatePicker
| Prop | Type | Default | Description |
|---|---|---|---|
startDate | string | "nov 12, 2025" | The start date text to display. |
startTime | string | "5:30PM" | The start time text to display. |
endDate | string | "nov 17, 2025" | The end date text to display. |
endTime | string | — | Optional end time text to display. |
focused | boolean | false | Whether the picker is in focused/selected state. |
helperText | string | — | Helper text displayed below the picker. |
showHelperText | boolean | false | Whether to show the helper text. |
onClick | () => void | — | Click handler for the picker. |