React

@litopis/react provides the LitopisDatePicker component.

Installation

npm install @litopis/react react react-dom

tsx

import { LitopisDatePicker } from "@litopis/react";
import "@litopis/dom/styles/base.css";

Example

Value: current date

Controlled value

value accepts LitopisDateValue | null. onValueChange receives the selected date.

tsx

import { useState } from "react";
import { LitopisDatePicker, type LitopisDateValue } from "@litopis/react";

const [date, setDate] = useState<LitopisDateValue | null>(null);

<LitopisDatePicker
  mode="popover"
  label="Start date"
  value={date}
  onValueChange={setDate}
/>

Controller ref

The forwarded ref implements DatePickerController. Use it to call methods such as open(), close() and getISOValue().

tsx

import { useRef } from "react";
import type { DatePickerController } from "@litopis/dom";

const pickerRef = useRef<DatePickerController | null>(null);

<LitopisDatePicker ref={pickerRef} />
<button onClick={() => pickerRef.current?.open()}>Open calendar</button>

Range

Keep the same component. A range is controlled with range and emits onRangeChange.

tsx

const [stay, setStay] = useState({ start: null, end: null });

<LitopisDatePicker
  selection="range"
  layout="split"
  name={{ start: "from", end: "to" }}
  range={stay}
  onRangeChange={setStay}
/>

Styling

Pass className to the component root. Import one Litopis stylesheet in your application entry.

Styling guide →