DatePicker

({ value, timezone }) => {setValue(value); if(timezone){setTimezone(timezone)}}

import * as React from "react";
import { DatePicker } from "spaceweb/date-picker";

export default () => {
  const [value, setValue] = React.useState(new Date());
  const [timezone, setTimezone] = React.useState(
    "Asia/Kolkata"
  );
  return (
    <DatePicker
      value={value}
      timezone={timezone}
      timeSelect
      intent="default"
      peekNextMonth
      variant="default"
      onChange={({ value, timezone }) => {
        setValue(value);
        if (timezone) {
          setTimezone(timezone);
        }
      }}
      monthsShown={1}
      weekStartsOn={0}
      formatString="MM/dd/yyyy"
    />
  );
}

A simple and reusable component to work with or select a date or a range of dates.

Accessibility

• Supports keyboard hotkeys: tab - to switch between inputs, arrows, monthyear select and day grid. escape to close datepicker dropdown.
• When month and year selects focused, up and down causes dropdown to open and move to value, enter and space to choose selected year or month. When day grid is focused, left, down right and up to move through the grid days. Enter to pick date.
• When left or right arrow is focused, enter causes the same as click on this arrow.
• Accessibility best practices for this component (aria-valuenow, aria-valuetext, aria-valuemin, aria-valuemax, role=datepicker).

Examples

API

Date Picker props

Date Picker exports

You can import this module like so:

import {Calendar} from 'spaceweb/date-picker'

It exports the following components or utility functions:

• Calendar
• DEFAULT_FORMAT_STRING
• DISABLE_WHOLE_DAY
• DatePicker
• DatePickerInput
• DateTimeRangeInputs
• ENABLE_WHOLE_DAY
• StatelessDatePicker
• StyledCalendarContainer
• StyledCalendarHeader
• StyledInputWrapper
• StyledMonth
• StyledMonthContainer
• StyledMonthHeader
• StyledMonthYearSelectButton
• StyledMonthYearSelectIconContainer
• StyledNextButton
• StyledPrevButton
• StyledRoot
• StyledSelectorContainer
• StyledWeek
• StyledWeekdayHeader
• formatDate
• useDatePickerState