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

Github

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

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

export default Example

Examples

Sizes

Use size property with option:

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

Github

Date picker Field