Datetime Picker

A comprehensive datetime picker component built on top of shadcn-ui with no additional libraries required. Features date and time selection, calendar interface, and smart datetime input for modern web applications.

Thanks to Yerfa

Componendt not found

Installation

npx uilayouts@latest add dateTime-input

Props

PropTypeDefaultDescription
valueDateundefinedThe selected date value for the input.
onValueChange(date: Date) => void-Callback function triggered when the date value changes.
showCalendarbooleantrueWhether to display a calendar for date selection.
showTimePickerbooleantrueWhether to display a time picker for time selection.
classNamestringundefinedAdditional CSS class names to style the input component.
placeholderstringundefinedPlaceholder text displayed when no value is selected.
disabledbooleanundefinedWhether the input is disabled and not interactive.

Example

Time Picker

Date Picker