Welcome UI logo

DateTimePicker

The DateTimePicker component is a user interface element that allows users to select both dates and times from a single interface. It provides a calendar view for selecting dates and a dropdown or input fields for specifying times. This component is essential for applications that require precise scheduling or event management, offering a seamless way to input both date and time information.

Source
OverviewProps
import { DatePicker } from 'welcome-ui/DatePicker'
import { DateTimePicker } from 'welcome-ui/DateTimePicker'
import { DateIcon } from 'welcome-ui/Icon'
import { TimePicker } from 'welcome-ui/TimePicker'


const Example = () => {
  return (
    <DateTimePicker name="welcome" value={new Date()}>
      <DatePicker icon={<DateIcon />} iconPlacement="right" />
      <TimePicker />
    </DateTimePicker>
  )
}


export default Example

Examples

Sizes

Use size property with option:

  • xs (24px)
  • sm (32px)
  • md (40px - default)
  • lg (48px)
Date pickerField