Datepicker

This page describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

DatePicker

To add a DatePicker component to your app:

1
2
import { DatePicker } from "@forge/react";

Description

A component that lets users select a calendar date. The value is displayed in the date format for the user's locale, such as 'DD-MM-YYYY' for en-NZ.

Props

Name	Type	Required	Description
`defaultValue`	`string`		The initial date value to display. It should be formatted as `'YYYY-MM-DD'`.
`isRequired`	`boolean`		Indicates to the user whether or not a value is required in this field to submit the form. If a field is required, an asterisk appears at the end of that field’s label.
`label`	`string`	Yes	The label to display.
`name`	`string`	Yes	The key to which the input value is assigned in the returned form object.
`description`	`string`		The text description of the date picker.
`placeholder`	`string`		The placeholder helper text.
`onChange`	`(value: string) => void \| Promise`	No	An event handler that can be asynchronous. Allows you to read values from the component without having to submit as part of a `Form`.

Example

A date picker to book an appointment.

1
2
const App = () => {
  return (
    <DatePicker
      name="date"
      label="Appointment Date"
      description="Appointment must be made 1 day in advance"
      onChange={(value) => console.log(value)}
    />
  );
};

The submitted form data. The submitted date is always formatted as 'YYYY-MM-DD'.

1
2
{
  //... other form data
  date: "2019-11-01";
}

Output

Example image of rendered date picker