- packages.styleProps.title
- uiCategories.interactiveElements.components.buttons
- uiCategories.interactiveElements.components.links
- uiCategories.interactiveElements.components.inputs
- uiCategories.interactiveElements.components.checkbox
- uiCategories.interactiveElements.components.radioGroup
- uiCategories.interactiveElements.components.select
- uiCategories.interactiveElements.components.switch
- uiCategories.interactiveElements.components.textarea
- uiCategories.interactiveElements.components.label
- uiCategories.interactiveElements.components.autocomplete
- uiCategories.interactiveElements.components.calendar
- uiCategories.interactiveElements.components.timePicker
- uiCategories.interactiveElements.components.datePicker
- uiCategories.interactiveElements.components.pagination
- uiCategories.interactiveElements.components.progressBar
- uiCategories.interactiveElements.components.skeleton
- uiCategories.interactiveElements.components.statusButton
uiCategories.interactiveElements.components.datePicker
uiCategories.interactiveElements.components.showcases.datePicker.description
Installation
Import
Usage
uiCategories.interactiveElements.components.showcases.datePicker.usage
Design Guidelines
uiCategories.interactiveElements.components.showcases.datePicker.designGuidelines
uiCategories.interactiveElements.components.showcases.datePicker.examples.basicUsage.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.basicUsage.description
uiCategories.interactiveElements.components.showcases.datePicker.examples.dialogVariant.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.dialogVariant.description
uiCategories.interactiveElements.components.showcases.datePicker.examples.inlineVariant.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.inlineVariant.description
uiCategories.interactiveElements.components.showcases.datePicker.examples.dateRangeSelection.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.dateRangeSelection.description
uiCategories.interactiveElements.components.showcases.datePicker.examples.withTimePicker.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.withTimePicker.description
uiCategories.interactiveElements.components.showcases.datePicker.examples.clearable.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.clearable.description
uiCategories.interactiveElements.components.showcases.datePicker.examples.inputSizes.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.inputSizes.description
uiCategories.interactiveElements.components.showcases.datePicker.examples.withDateConstraints.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.withDateConstraints.description
uiCategories.interactiveElements.components.showcases.datePicker.examples.formIntegrationEventPlanning.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.formIntegrationEventPlanning.description
uiCategories.interactiveElements.components.showcases.datePicker.examples.formIntegrationBookingWithDateRange.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.formIntegrationBookingWithDateRange.description
uiCategories.interactiveElements.components.showcases.datePicker.examples.formIntegrationMultipleDateSelection.title
uiCategories.interactiveElements.components.showcases.datePicker.examples.formIntegrationMultipleDateSelection.description
DateField
uiCategories.interactiveElements.components.showcases.datePicker.composedComponents.dateField.description packages.composedComponents.extends DatePicker. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
field | FieldMetadata | — | uiCategories.interactiveElements.components.showcases.datePicker.composedComponents.dateField.props.field.description |
label | string | React.ReactNode | — | uiCategories.interactiveElements.components.showcases.datePicker.composedComponents.dateField.props.label.description |
topText | string | React.ReactNode | — | uiCategories.interactiveElements.components.showcases.datePicker.composedComponents.dateField.props.topText.description |
labelProps | React.LabelHTMLAttributes<HTMLLabelElement> | — | uiCategories.interactiveElements.components.showcases.datePicker.composedComponents.dateField.props.labelProps.description |
inputClass | string | — | uiCategories.interactiveElements.components.showcases.datePicker.composedComponents.dateField.props.inputClass.description |
wrapperClassName | string | — | uiCategories.interactiveElements.components.showcases.datePicker.composedComponents.dateField.props.wrapperClassName.description |
inputRef | React.Ref<HTMLDivElement> | — | uiCategories.interactiveElements.components.showcases.datePicker.composedComponents.dateField.props.inputRef.description |
className | string | — | packages.commonProps.className.description |
packages.sections.api
Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
value | Date | Date[] | { from: Date; to?: Date } | undefined | undefined | uiCategories.interactiveElements.components.showcases.datePicker.props.value.description |
onValueChange | (value: Date | Date[] | { from: Date; to?: Date } | undefined) => void | - | uiCategories.interactiveElements.components.showcases.datePicker.props.onValueChange.description |
defaultValue | Date | Date[] | { from: Date; to?: Date } | undefined | undefined | uiCategories.interactiveElements.components.showcases.datePicker.props.defaultValue.description |
variant | "popover" | "dialog" | "inline" | "popover" | uiCategories.interactiveElements.components.showcases.datePicker.props.variant.description |
mode | "single" | "multiple" | "range" | "single" | uiCategories.interactiveElements.components.showcases.datePicker.props.mode.description |
placeholder | string | "Select date" | uiCategories.interactiveElements.components.showcases.datePicker.props.placeholder.description |
clearable | boolean | false | uiCategories.interactiveElements.components.showcases.datePicker.props.clearable.description |
inputSize | "sm" | "md" | "lg" | "xl" | "md" | uiCategories.interactiveElements.components.showcases.datePicker.props.inputSize.description |
numberOfMonths | number | 1 | uiCategories.interactiveElements.components.showcases.datePicker.props.numberOfMonths.description |
showTimePicker | boolean | false | uiCategories.interactiveElements.components.showcases.datePicker.props.showTimePicker.description |
showTodayButton | boolean | false | uiCategories.interactiveElements.components.showcases.datePicker.props.showTodayButton.description |
disabled | Date[] | ((date: Date) => boolean) | boolean | false | uiCategories.interactiveElements.components.showcases.datePicker.props.disabled.description |
minDate | Date | undefined | undefined | uiCategories.interactiveElements.components.showcases.datePicker.props.minDate.description |
maxDate | Date | undefined | undefined | uiCategories.interactiveElements.components.showcases.datePicker.props.maxDate.description |
locale | string | "en-US" | uiCategories.interactiveElements.components.showcases.datePicker.props.locale.description |
weekStartsOn | 0 | 1 | 0 | uiCategories.interactiveElements.components.showcases.datePicker.props.weekStartsOn.description |
className | string | — | packages.commonProps.className.description |