Skip to main content

editable

Description​

defines whether a date range picker is editable or sets a custom format for editing dates

Type​

boolean | function

Default value​

false

Example​

<Field label="Editable (new Date())" let:id>
    <DateRangePicker editable={true} {id} />
</Field>

Details​

It is possible to set a date range picker to the editable state by declaring the property with no value:

<DatePicker editable />

You can also specify a function as a value of the editable property to use a custom format for editing dates in DateRangePicker. Check the example below:

<script>
    function parseDate(string) {
        const p = string.match(/(..)(..)(.+)/);
        return p ? new Date(p.slice(1, 4).join("/")) : null;
    }
</script>

<Field label="Editable custom format (MMDDYYYY)" let:id>
    <DateRangePicker editable={parseDate} {id} format={"%m%d%Y"} />
</Field>

Related article: Setting the editable state

Related sample: DateRangePicker