WUI 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@welcome-ui/date-time-picker
OverviewProps
import * as React from 'react'
import { DateTimePicker } from '@welcome-ui/date-time-picker'


const Example = () => {
  return <DateTimePicker name="welcome" value={new Date()} />
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/date-time-picker
2

Import component:

import { DateTimePicker } from '@welcome-ui/date-time-picker'

Examples

react-datepicker

It is based on the react-datepicker library.

Note: Pass a value of null if you don't want the default value of Date.now().

Pass props to childs

If you want to pass props to DatePicker or TimePicker you need to see example below

Sizes

Use size propety with option:

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

Transparent

Pass transparent to remove background-color and border-color

Date pickerField