UIDatePicker

Create a simple input with date-picker functionality.

Since: 6.5.0 (6.1.0)

NameTypeDefaultDescription

placeholder

string

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

value

string

Required - The date to present in the input, should be in YYYY-MM-DD format (2019-11-01), if empty string, value will be set to "today"

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.

disabled

boolean

false

Set to true to disable input

keepPlaceholderInValue

boolean

false

min

number

Min value for range. YYYY-MM-DD format

max

number

Max value for range. YYYY-MM-DD format

onChange

function

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

Example

import {UIDatePicker} from 'writer'

render($$) {
    return $$('div').append(
        $$(UIDatePicker, {
            value: '2019-11-01',
            modalSize: 'small',
            onChange: (newValue) => {
                this.extendState({ inputDateValue: newValue })
            },
        }).ref('myInputDateValue')
    )
}