DatePicker

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

Import

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

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

Usage

Here's a basic usage of the DatePicker component.

Editable Example

function Example() {
  const [date, setDate] = React.useState(new Date());

  return <DatePicker date={date} setDate={setDate} />;
}

function Example() {
  const [date, setDate] = React.useState(new Date());
  return <DatePicker date={date} setDate={setDate} />;
}

Sizes

Editable Example

function Example() {
  const [date, setDate] = React.useState(new Date());

  return <DatePicker date={date} setDate={setDate} size="sm" />;
}

function Example() {
  const [date, setDate] = React.useState(new Date());
  return <DatePicker date={date} setDate={setDate} size="sm" />;
}

Format

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

Editable Example

function Example() {
  const [date, setDate] = React.useState(new Date());

  return <DatePicker date={date} setDate={setDate} formatDate="MMM dd" includeTime={false} />;
}

function Example() {
  const [date, setDate] = React.useState(new Date());
  return <DatePicker date={date} setDate={setDate} formatDate="MMM dd" includeTime={false} />;
}

Without time

Editable Example

function Example() {
  const [date, setDate] = React.useState(new Date());

  return <DatePicker date={date} setDate={setDate} includeTime={false} />;
}

function Example() {
  const [date, setDate] = React.useState(new Date());
  return <DatePicker date={date} setDate={setDate} includeTime={false} />;
}

Disabled date

Editable Example

function Example() {
  const [date, setDate] = React.useState();
  const disabledSunday = (currentDate) => currentDate.getDay() === 0;

  return <DatePicker date={date} setDate={setDate} disabledDate={disabledSunday} />;
}

function Example() {
  const [date, setDate] = React.useState();
  const disabledSunday = (currentDate) => currentDate.getDay() === 0;
  return <DatePicker date={date} setDate={setDate} disabledDate={disabledSunday} />;
}

Don't show input

Editable Example

function Example() {
  const [date, setDate] = React.useState(null);

  return <DatePicker date={date} setDate={setDate} showInput={false} formatDate="yyyy MMM d HH:mm" />;
}

function Example() {
  const [date, setDate] = React.useState(null);
  return <DatePicker date={date} setDate={setDate} showInput={false} formatDate="yyyy MMM d HH:mm" />;
}

Props

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

Name	Type	Default	Description
`date`	`Date`	required	A state to control date of the DatePicker.
`setDate`	`function`	required	A function that receives the updated date, used to update your state.
`formatDate`	`string`		The format of the display date.
`includeTime`	`boolean`	true	Show time in the calendar.
`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.