@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