@gechiui/components
Version:
UI components for GeChiUI.
67 lines (42 loc) • 1.64 kB
Markdown
# DateTimePicker
DateTimePicker is a React component that renders a calendar and clock for date and time selection. The calendar and clock components can be accessed individually using the `DatePicker` and `TimePicker` components respectively.
## Best practices
Date pickers should:
- Use smart defaults and highlight the current date.
## Usage
Render a DateTimePicker.
```jsx
import { DateTimePicker } from '@gechiui/components';
import { useState } from '@gechiui/element';
const MyDateTimePicker = () => {
const [ date, setDate ] = useState( new Date() );
return (
<DateTimePicker
currentDate={ date }
onChange={ ( newDate ) => setDate( newDate ) }
is12Hour={ true }
/>
);
}
```
## Props
The component accepts the following props:
### currentDate
The current date and time at initialization. Optionally pass in a `null` value to specify no date is currently selected.
- Type: `string`
- Required: No
- Default: today's date
### onChange
The function called when a new date or time has been selected. It is passed the `currentDate` as an argument.
- Type: `Function`
- Required: Yes
### is12Hour
Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be MM-DD-YYYY.
- Type: `bool`
- Required: No
- Default: false
### isInvalidDate
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.
- Type: `Function`
- Required: No