Skip to main content

editable

Description​

Optional. Defines whether a date range picker is editable or sets a custom format for editing dates

Usage​

editable?: boolean | ((value: string) => Date | null);

Parameters​

  • true – the date range picker input field becomes editable, allowing users to type a date directly.

  • false – (default) the date range picker input is read-only; a date can only be selected from the calendar.

  • function (value: string) => Date | null - a custom parser function that takes the typed string (value) and returns either:

    • a Date object – if the string matches your format and can be converted into a valid date;
    • null – if parsing fails (the input is invalid).

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