UIDateTimePicker

Create a simple input with time-picker functionality.

Since: 6.5.0 (6.4.0)

NameTypeDefaultDescription

placeholder

string

Required - The text of the date picker placeholder if no date is selected

keepPlaceholderInValue

boolean

false

If set to true date picker value will be displayed together with placeholder, ex: "From 2020-01-01"

disabled

boolean

false

Set to true to disable input

size

string

"normal"

Input size presentation. Supports small|normal|large

modalSize

string

Adjusts the size of modal calendar, default size is large. "small", or "large"

type

string

Style for the input.

value

string

Required - The date and time to present in the input, should be in YYYY-MM-DD HH:mm format (2020-04-23 12:00), if empty string, value will be set to "now"

onChange

function

Required - Callback for when the input is changed, callback will be called with one argument, the new value in YYYY-MM-DD HH:mm format

Example

import {UIDateTimePicker} from 'writer'

render($$) {
    return $$('div').append(
        $$(UIDateTimePicker, {
            placeholder: 'Pick a date',
            keepPlaceholderInValue: false,
            disabled: false,
            value: this.state.myDateTimeValue,
            onChange: (newDateTime) => {
                this.extendState({ myDateTimeValue: newDateTime })
            },
        }).ref('myDateTimeValue')
    )
}