@wedgekit/date-picker
v3.3.0
Published
## Description
Downloads
21
Maintainers
Keywords
Readme
@wedgekit/date-picker
Description
@wedgekit/date-picker
provides a calendar and a context provider for coordinating date/time fields when picking dates.
Examples
Single Date
import { DateTimePicker, Date, Time } from '@wedgekit/date-picker';
const Example = () => {
const [value, setValue] = React.useState('');
return (
<DateTimePicker value={value} onChange={setValue}>
<Date label="Date" />
<Time label="Time" />
</DateTimePicker>
);
};
render(<Example />);
Range
import { DateTimePicker, Date, Time } from '@wedgekit/date-picker';
const Example = () => {
const [value, setValue] = React.useState([]);
return (
<DateTimePicker range value={value} onChange={setValue}>
<Date label="Start" position="start" />
<Time label="Time Start" labelHidden position="start" />
<Date label="End" position="end" />
<Time label="Time End" labelHidden position="end" />
</DateTimePicker>
);
};
render(<Example />);
Props
range
Indicates if the DatePicker value is a range of dates.
Type: boolean
Required: ✅
value
The date value. If range
is true it will be a tuple; otherwise it is a single date.
Type: ISO8601String | [ISO8601String, ISO8601String]
Required: ✅
onChange
Callback for when the value changes. If range
is true it takes a tuple; otherwise takes a single date.
Required: ✅
Type: (ISO8601String | [ISO8601String, ISO8601String]) => void
timezone
Timezone the value should be displayed in. This will default to the browser's timezone.
Required: ❌
Type: IANA Timezone Name
Further Reading
Documentation for more specialized use cases can be found here