DateTimePicker

Allows user to select a predefined date and time.

version

4.2.0

install

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

usage

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

View package View source

About #

It is based on the react-datepicker library. All the props the library exposes can be passed to either DatePicker or TimePicker.

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

Simple use case #


function () {
  const [value, setValue] = React.useState(Date.now())

  const handleChange = newValue => {
    setValue(newValue)
  }

  return (
    <Field label="Date">
      <DateTimePicker name="welcome" onChange={handleChange} value={value} />
    </Field>
  )
}

Pass props to DatePicker #


function () {
  const [value, setValue] = React.useState(Date.now())

  const handleChange = newValue => {
    setValue(newValue)
  }

  return (
    <Field label="Date">
      <DateTimePicker
        dateFormat="MMM dd yyyy"
        name="welcome2"
        popperProps={{ zIndex: 50 }}
        showMonthDropdown
        showYearDropdown
        onChange={handleChange}
        value={value}
      >
        <DatePicker icon={<DateIcon />} iconPlacement="right" />
        <TimePicker />
      </DateTimePicker>
    </Field>
  )
}