Skip to main content

editable

Description

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

Usage

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

Parameters

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

  • false - (default) the date 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())">
{(id) => (
<DatePicker editable={true} id={id} />
)}
</Field>

Details

It is possible to set a date 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 a date in DatePicker. Check the example below:

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

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

Related article: Setting the editable state

Related sample: DatePicker