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())">

    {#snippet children(id)}
    <DateRangePicker editable={true} {id} />
    {/snippet}

</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)">
    {#snippet children(id)}
    <DateRangePicker editable={parseDate} {id} format={"%m%d%Y"} />
    {/snippet}
</Field>

Related article: Setting the editable state

Related sample: DateRangePicker