Time Range Picker

TODAY

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

import * as React from "react";
import { TimeRangePicker } from "spaceweb/time-range-picker";

export default () => {
  const [value, setValue] = React.useState("TODAY");
  const [timezone, setTimezone] = React.useState(
    "Asia/Kolkata"
  );
  return (
    <TimeRangePicker
      value={value}
      placeholder="MM/dd/yyyy-MM/dd/yyyy"
      timezone={timezone}
      weekStartsOn={0}
      autoSizeInput
      showTimezoneInSummary
      showFullDateInSummary
      timeSelect
      displayVariant="default"
      monthsShown={2}
      intent="default"
      variant="default"
      onSubmit={({ value, date, preset, timezone }) => {
        setValue(value);
        setTimezone(timezone);
      }}
      formatString="MMM dd, yyyy hh:mm a"
    />
  );
}

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

Note: Consumer of this component can customize the labels for header, timezone, cancel button, save button and even error message via LocaleProvider

Examples

NOTE: the valid range is [minDate, maxDate) since the Calendar sets seconds and milliseconds on end time to 59.999. Consider a scenario where maxDate has the time 12:30:00.000 and user selects the same as End Time. It gets converted to 12:30:59.999 which violates maxDate. Thus, the valid range is not inclusive of maxDate.

ApiTable

Time Range Picker Props

You can check the implementation of the component for more details.

Time Range Picker exports

You can import this module like so:

import {TimeRangePicker} from 'spaceweb/time-range-picker'

It exports the following components or utility functions:

• TimeRangePicker
• convertDateFromSrcTzToTargetTz
• convertDateFromSystemTzToTargetTz
• convertDateFromTargetTzToSystemTz
• formatSummaryValue
• getDefaultTimeRangePresets
• getSystemTzName