@wordpress/components
Version:
UI components for WordPress.
66 lines (39 loc) • 1.67 kB
Markdown
# DatePicker
DatePicker is a React component that renders a calendar for date selection. It can be used independently or as part of the `DateTimePicker` component.
## Usage
Render a DatePicker.
```jsx
import { useState } from 'react';
import { DatePicker } from '@wordpress/components';
const MyDatePicker = () => {
const [ date, setDate ] = useState( new Date() );
return (
<DatePicker
currentDate={ date }
onChange={ ( newDate ) => setDate( newDate ) }
/>
);
};
```
## Props
The component accepts the following props:
### `currentDate`: `Date | string | number | null`
The current date at initialization. Optionally pass in a `null` value to specify no date is currently selected.
- Required: No
- Default: today's date
### `onChange`: `( date: string ) => void`
The function called when a new date has been selected. It is passed the `currentDate` as an argument.
- Required: No
### `events`: `{ date: Date }[]`
List of events to show in the date picker. Each event will appear as a dot on the day of the event.
- Required: No
### `isInvalidDate`: `( date: Date ) => boolean`
A callback function which receives a Date object representing a day as an argument, and should return a Boolean to signify if the day is valid or not.
- Required: No
### `onMonthPreviewed`: `( date: string ) => void`
A callback invoked when selecting the previous/next month in the date picker. The callback receives the new month date in the ISO format as an argument.
- Required: No
### `startOfWeek`: `0 | 1 | 2 | 3 | 4 | 5 | 6`
The day that the week should start on. 0 for Sunday, 1 for Monday, etc.
- Required: No
- Default: 0