Solid

@litopis/solid provides the LitopisDatePicker component.

Installation

npm install @litopis/solid solid-js

tsx

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

Example

Value: current date

Value

Read value from a signal and pass the setter to onValueChange.

tsx

import { createSignal } from "solid-js";
import { LitopisDatePicker, type LitopisDateValue } from "@litopis/solid";

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

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

Controller callback

controllerRef receives the mounted DatePickerController and null during cleanup.

tsx

import { createSignal } from "solid-js";
import type { DatePickerController } from "@litopis/dom";

const [controller, setController] = createSignal<DatePickerController | null>(null);

<LitopisDatePicker controllerRef={setController} />
<button onClick={() => controller()?.open()}>Open calendar</button>

Range

Use selection="range" on the same component; endpoint names remain native form fields.

tsx

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

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

Styling

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

Styling guide →