DateRangePicker

DateRangePicker component is a date input with a calendar popover below.

Import

import { DateRangePicker } from '@sajari-ui/core';

import { DateRangePicker } from '@sajari-ui/core';

Usage

Here's a basic usage of the DateRangePicker component.

Editable Example

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);

  return (
    <DateRangePicker startDate={startDate} setStartDate={setStartDate} endDate={endDate} setEndDate={setEndDate} />
  );
}

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  return (
    <DateRangePicker startDate={startDate} setStartDate={setStartDate} endDate={endDate} setEndDate={setEndDate} />
  );
}

Sizes

Editable Example

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);

  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      size="sm"
    />
  );
}

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      size="sm"
    />
  );
}

Format

Format of the string is based on Unicode Technical Standard #35.

Editable Example

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);

  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      formatDate="MMM dd"
      includeTime={false}
    />
  );
}

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      formatDate="MMM dd"
      includeTime={false}
    />
  );
}

Without time

Editable Example

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);

  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      includeTime={false}
    />
  );
}

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      includeTime={false}
    />
  );
}

Disable auto focus mode

Editable Example

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);

  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      autoChangeFocus={false}
    />
  );
}

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      autoChangeFocus={false}
    />
  );
}

Disabled date

Editable Example

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  const disabledSunday = (currentDate) => currentDate.getDay() === 0;

  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      disabledDate={disabledSunday}
    />
  );
}

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  const disabledSunday = (currentDate) => currentDate.getDay() === 0;
  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      disabledDate={disabledSunday}
    />
  );
}

Don't show input

Editable Example

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);

  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      showInput={false}
      formatDate="yyyy MMM d HH:mm"
    />
  );
}

function Example() {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);
  return (
    <DateRangePicker
      startDate={startDate}
      setStartDate={setStartDate}
      endDate={endDate}
      setEndDate={setEndDate}
      showInput={false}
      formatDate="yyyy MMM d HH:mm"
    />
  );
}

Props

The DateRangePicker component composes PseudoBox so you can pass all PseudoBox props, and React.InputHTMLAttributes.

Name	Type	Default	Description
`startDate`	`Date`	required	A state to control start date of the DateRangePicker.
`setStartDate`	`function`	required	A function that receives the updated start date, used to update your state.
`endDate`	`Date`	required	A state to control end date of the DateRangePicker.
`setEndDate`	`function`	required	A function that receives the updated end date, used to update your state.
`formatDate`	`string`		The format of the display date.
`includeTime`	`boolean`	true	Show time in the calendar.
`autoChangeFocus`	`boolean`	true	Auto change focus after selecting date.
`disabledDate`	`function`		Specify the date that cannot be selected.
`placeholder`	`string`		The placeholder for the inner input field.
`size`	`"sm"`, `"md"`	`"md"`	The size of the input field and the calendar.
`placement`	`PopperJS.Placement`	`"bottom"`	The placement of the calendar dropdown.