DatePicker

Date picker control.

This library is built on top of React Day Picker. Please refer to their documentation for advanced usage about options or modifiers.

Single

mai 1989

import { useState } from "react";
import { Button } from "swash/Button";
import { SingleDatePicker } from "swash/controls/DatePicker";

() => {
  const [value, setValue] = useState("1989-05-21");
  return (
    <div className="flex gap-4 items-center">
      <SingleDatePicker value={value} onChange={setValue} />
      <Button type="button" onClick={() => setValue("1989-05-21")}>
        Reset date
      </Button>
    </div>
  );
};

Range

mai 1989

import { useState } from "react";
import { Button } from "swash/Button";
import { RangeDatePicker } from "swash/controls/DatePicker";

() => {
  const [value, setValue] = useState({ from: "1989-05-21", to: "1989-05-28" });
  return (
    <div className="flex gap-4 items-center">
      <RangeDatePicker value={value} onChange={setValue} />
      <Button
        type="button"
        onClick={() => setValue({ from: "1989-05-21", to: "1989-05-28" })}
      >
        Reset range
      </Button>
    </div>
  );
}

Range (two months)

mai 1989

juin 1989

import { useState } from "react";
import { Button } from "swash/Button";
import { RangeDatePicker } from "swash/controls/DatePicker";

() => {
  const [value, setValue] = useState({ from: "1989-05-21", to: "1989-05-28" });
  return (
    <div className="flex gap-4 items-center">
      <RangeDatePicker value={value} onChange={setValue} numberOfMonths={2} />
      <Button
        type="button"
        onClick={() => setValue({ from: "1989-05-21", to: "1989-05-28" })}
      >
        Reset range
      </Button>
    </div>
  );
}

Disabled

mai 1989

import { SingleDatePicker } from "swash/controls/DatePicker";

() => (
  <SingleDatePicker value="1989-05-21" onChange={() => {}} disabled />
);

API

Props

React props	Value(s)	Description
`value`	`string / null`	Actual field value.
`onChange`	`(value: string) => void`	Triggered when the date changes.