v0.1.0

DatePicker

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/date-picker

npm @spark-web/date-picker

Source GitHub.com

Bundle unpkg.com

The DatePicker component allows users to either manually enter a date in dd/MM/yyyy format or use the calendar button to render a month view that users can pick from. Clicking on a date will fill in the input for that date in the correct format.

Example

Select date

Open in Playroom

const [value, setValue] = React.useState();

return (
  <Field label="Select date">
    <DatePicker value={value} onChange={setValue} />
  </Field>
);

const [value, setValue] = React.useState();

return (
  <Field label="Select date">
    <DatePicker value={value} onChange={setValue} />
  </Field>
);

Props

Prop	Type	Description
onChange	(day: Date) => void	Function to be fired following a change event.
value	Date	The value of the field.
data?	DataAttributeMap	Sets data attributes for the element. Map of data attributes.
initialMonth?	Date	The calendar month to initially show, if no value is set.
maxDate?	Date	If set, any days after this date will not be selectable.
minDate?	Date	If set, any days before this date will not be selectable.

The component passes props into its underlying TextInput component and are not listed here.