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}
/>

Custom input

Pass an input child with slot="input". Litopis keeps its classes and placeholder while supplying the picker behavior and accessibility attributes.

tsx

<LitopisDatePicker value={date()} onValueChange={setDate}>
  <input slot="input" class="my-input" placeholder="Choose a date" />
</LitopisDatePicker>

Styling

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

Styling guide →