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.

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

Sizes

Use size property with option:

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