DateTimePicker

You must configure a localizer to use this component!
import DateTimePicker from 'react-widgets/lib/DateTimePicker'
import { DateTimePicker } from 'react-widgets'
  • month
  • year
  • decade
  • century
  • alt + down arrow open calendar or time
  • alt + up arrow close calendar or time
  • down arrow move focus to next item
  • up arrow move focus to previous item
  • home move focus to first item
  • end move focus to last item
  • enter select focused item
  • any key search list for item starting with key

Props
Also accepts all Calendar props, unless otherwise noted.

autoFocustype: boolean

Pass focus to the DateTimePicker when it mounts.

containerClassNametype: string

Adds a css class to the input container element.

culturetype: string

Set the culture of the DateTimePicker, passed to the configured localizer.

currentDatetype: Date
initialized with: defaultCurrentDate
controlled by: onCurrentDateChange

Default current date at which the calendar opens. If none is provided, opens at today's date or the value date (if any).

datetype: boolean
default: true

Enable the calendar component of the picker.

dateIcontype: any
default: calendar

Specify the element used to render the calendar dropdown icon.

disabledtype: boolean

let { DateTimePicker } = ReactWidgets


let example = (
  <DateTimePicker
    disabled
    defaultValue={new Date()}
  />
)

render(example);

dropUptype: boolean

Controls the opening direction of the DateTimePicker popup.

let { DateTimePicker } = ReactWidgets

let widget = (
  <DateTimePicker
    dropUp
    data={[
      'orange',
      'red',
      'blue',
      'purple'
    ]}
  />
);

render(widget);

editFormattype: string | (value: Date, culture: ?string, localizer: Localizer) => string

A formatter to be used while the date input has focus. Useful for showing a simpler format for inputing. For more information about formats visit the Localization page

let { DateTimePicker } = ReactWidgets;

let formatter = Globalize.dateFormatter({ date: 'short' })

let widget = (
  <DateTimePicker
    editFormat={formatter} 
    defaultValue={new Date()}
    format={{ raw: 'MMM dd, yyyy' }}
    time={false}
  />
)

render(widget);

formattype: string | (value: Date, culture: ?string, localizer: Localizer) => string

A formatter used to display the date value. For more information about formats visit the Localization page

let { DateTimePicker } = ReactWidgets;

let formatter = Globalize.dateFormatter({ raw: 'MMM dd, yyyy' })

let widget = (
  <DateTimePicker
    format={formatter} 
    defaultValue={new Date()}
    time={false}
  />
)

render(widget);

inputPropstype: Object

An object of props that is passed directly to the underlying input component.

isRtltype: boolean

Controls the read direction of the DateTimePicker.

Tip: You can also set the direction for all widgets at once, by exposing isRtl on context in a common parent component, such as your application root.

maxtype: Date
default: new Date(2099, 11, 31)

The maximum Date that can be selected. Max only limits selection, it doesn't constrain the date values that can be typed or pasted into the widget. If you need this behavior you can constrain values via the onChange handler.

let { DateTimePicker } = ReactWidgets;

let widget = (
  <DateTimePicker 
    max={new Date()}
  />
)

render(widget);

messagestype: { dateButton?: string, timeButton?: string }

Object hash containing display text and/or text for screen readers. Use the messages object to localize widget text or provide custom rendering.

mintype: Date
default: new Date(1900, 0, 1)

The minimum Date that can be selected. Min only limits selection, it doesn't constrain the date values that can be typed or pasted into the widget. If you need this behavior you can constrain values via the onChange handler.

let { DateTimePicker } = ReactWidgets;

let widget = (
  <DateTimePicker 
    min={new Date()}
  />
)

render(widget);

nametype: string

The HTML name attribute, passed directly to the input element.

onBlurtype: Function

The native onBlur event, called when focus leaves the DateTimePicker entirely.

onChangetype: Function
controls: value

A callback fired when the current value changes.

let { DateTimePicker } = ReactWidgets;

class ChangeExample extends React.Component {
  constructor(...args) {
    super(...args)
    this.state = { value: this.props.initialValue }
  }
  render() {
    return (
      <DateTimePicker
        value={this.state.value}
        onChange={value => this.setState({ value })}
      />
    )
  }
}

render(
  <>
    <ChangeExample initialValue={new Date()} />
    <ChangeExample initialValue={null} />
  </>
);

onCurrentDateChangetype: Function
controls: currentDate

Change event Handler that is called when the currentDate is changed. The handler is called with the currentDate object.

onFocustype: Function

The native onFocus event, called when focus enters the DateTimePicker.

onKeyDowntype: Function

The native onKeyDown event, called preventDefault will prevent any custom behavior, included keyboard shortcuts.

onKeyPresstype: Function

The native onKeyPress event, called preventDefault will stop any custom behavior.

onSelecttype: Function

This handler fires when an item has been selected from the list. It fires before the onChange handler and fires regardless of whether the value has actually changed.

let { DateTimePicker } = ReactWidgets

let alertWhenSelected = () => alert('selected!');
let alertWhenChanged = () => alert('changed!');

let widget = (
  <DateTimePicker
    onSelect={alertWhenSelected}
    onChange={alertWhenChanged}
    data={['orange', 'red', 'blue', 'purple']}
  />
)

render(widget);

onToggletype: Function
controls: open

A callback fired with the DateTimePicker's popup visibility is about to change.

Use in conjunction with the open prop to manually control the popup visibility.

opentype: false | 'time' | 'date'
default: false
initialized with: defaultOpen
controlled by: onToggle

Controls the visibility of the DateTimePicker popup. Use defaultOpen to set an initial value for uncontrolled widgets.

let { DateTimePicker } = ReactWidgets;
let values = [false, 'date', 'time'];

class Example extends React.Component {
  render() {
    let { open } = this.state || {}
    let toggle = e => this.setState({ open: e.target.value });

    return (
      <div>
        {values.map((value, idx) =>
          <label key={idx} className='radio-inline'>
            <input
              name='open-option'
              type='radio'
              value={value}
              onChange={toggle}
            />
            {'' + value}
          </label>
        )}
        <DateTimePicker open={open} />
      </div>
    )
  }
};

render(<Example/>);

parsetype: Array<string> | string | Function

Determines how the widget parses the typed date string into a Date object. You can provide an array of formats to try, or provide a function that returns a date to handle parsing yourself. When parse is unspecified and the format prop is a string parse will automatically use that format as its default.

Try typing a date using the specified formats
let { DateTimePicker } = ReactWidgets;

let formats = [
  'MMM d yyyy',
  'MMM d yy',
  'd'
];

let widgets = (
  <div>
    <DateTimePicker parse={formats}/>

    {/* the naive approach: just use the Date constructor */}
    <DateTimePicker parse={str => new Date(str)}/>
    <span>Try typing a date using the specified formats</span>
  </div>
)

render(widgets);

placeholdertype: string

Text to display in the input when the value is empty.

popupTransitiontype: ReactComponent | string

A Transition component from react-transition-group v2. The provided component will be used instead of the default SlideDownTransition for fully customizable animations. The transition component is also injected with a dropUp prop indicating the direction it should open.

readOnlytype: boolean

Controls the read-only state of the DateTimePicker.

let { DateTimePicker } = ReactWidgets


let example = (
  <DateTimePicker
    readOnly
    defaultValue={new Date()}
  />
)

render(example);

steptype: number

The amount of minutes between each entry in the time list.

let { DateTimePicker } = ReactWidgets;

let widget = (
  <DateTimePicker 
    step={90}
  />
)

render(widget);

timetype: boolean
default: true

Enable the time list component of the picker.

timeComponenttype: ReactComponent | string

A customize the rendering of times but providing a custom component.

timeFormattype: string | (value: Date, culture: ?string, localizer: Localizer) => string

A formatter used by the time dropdown to render times. For more information about formats visit the Localization page.

  • 12:00:00 AM
  • 12:30:00 AM
  • 1:00:00 AM
  • 1:30:00 AM
  • 2:00:00 AM
  • 2:30:00 AM
  • 3:00:00 AM
  • 3:30:00 AM
  • 4:00:00 AM
  • 4:30:00 AM
  • 5:00:00 AM
  • 5:30:00 AM
  • 6:00:00 AM
  • 6:30:00 AM
  • 7:00:00 AM
  • 7:30:00 AM
  • 8:00:00 AM
  • 8:30:00 AM
  • 9:00:00 AM
  • 9:30:00 AM
  • 10:00:00 AM
  • 10:30:00 AM
  • 11:00:00 AM
  • 11:30:00 AM
  • 12:00:00 PM
  • 12:30:00 PM
  • 1:00:00 PM
  • 1:30:00 PM
  • 2:00:00 PM
  • 2:30:00 PM
  • 3:00:00 PM
  • 3:30:00 PM
  • 4:00:00 PM
  • 4:30:00 PM
  • 5:00:00 PM
  • 5:30:00 PM
  • 6:00:00 PM
  • 6:30:00 PM
  • 7:00:00 PM
  • 7:30:00 PM
  • 8:00:00 PM
  • 8:30:00 PM
  • 9:00:00 PM
  • 9:30:00 PM
  • 10:00:00 PM
  • 10:30:00 PM
  • 11:00:00 PM
  • 11:30:00 PM
let { DateTimePicker } = ReactWidgets;

let formatter = Globalize.dateFormatter({ time: 'medium' })

let widget = (
  <DateTimePicker
    timeFormat={formatter} 
    date={false}
    open="time"
  />
)

render(widget);

timeIcontype: any
default: clock

Specify the element used to render the time list dropdown icon.

valuetype: Date
default: null
initialized with: defaultValue
controlled by: onChange

Controls the current value of the DateTimePicker.

let { DateTimePicker } = ReactWidgets;

let widgets = (
  <>
    <DateTimePicker defaultValue={new Date()} />
    <DateTimePicker defaultValue={null} />
  </>
)

render(widgets);