UIDateTimePicker

Create a simple input with time-picker functionality.

Since: 6.5.0 (6.4.0)

Properties

Name	Type	Default	Description
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')
    )
}