Litopis | Examples

Basic inline picker

Inline calendar with an initial value and an ISO form value.

Value: select a date

ts

import { getToday } from "@litopis/core";
import { createDatePicker } from "@litopis/dom";
import "@litopis/dom/styles/base.css";

const picker = createDatePicker(root, {
  label: "Appointment date",
  selected: getToday(),
});

picker.getISOValue(); // YYYY-MM-DD

Popover date input

Keep the calendar out of document flow while preserving input typing, focus restoration and arrow-key entry into the grid.

ts

createDatePicker(root, {
  mode: "popover",
  format: "dd.mm.yyyy",
  label: "Departure date",
  outsideDays: false,
  size: "comfortable",
});

Bounded booking window

Dates outside the allowed range are disabled by the shared state layer and exposed consistently to every renderer.

Value: none

ts

import { addDays, getToday } from "@litopis/core";

const today = getToday();

createDatePicker(root, {
  label: "Booking date",
  min: addDays(today, -15),
  max: addDays(today, 15),
  outsideDays: false,
});

Three input formats, one stored value

Choose the visible format. getISOValue() returns YYYY-MM-DD in every case.

ts

createDatePicker(isoRoot, { format: "yyyy-mm-dd" });
createDatePicker(europeanRoot, { format: "dd.mm.yyyy" });
createDatePicker(usRoot, { format: "mm/dd/yyyy" });

Locale labels and explicit week starts

Native Intl supplies month, weekday and ARIA labels. Week start can follow locale data or be overridden independently.

Ukrainian locale

US locale, Monday override

ts

createDatePicker(ukRoot, {
  format: "dd.mm.yyyy",
  label: "Дата події",
  locale: "uk-UA",
});

createDatePicker(usRoot, {
  firstDayOfWeek: 1,
  format: "mm/dd/yyyy",
  label: "Event date",
  locale: "en-US",
});

Comfortable touch targets

Sets day and control targets to 44px.

Value: none

ts

createDatePicker(root, {
  format: "dd.mm.yyyy",
  outsideDays: false,
  season: true,
  todayButton: true,
  size: "comfortable",
});

Programmatic controller

Set the value, visible month or options from application code.

Value: none

ts

const picker = createDatePicker(root, { today });

picker.setDate(addDays(today, 9));
picker.setVisibleMonth(startOfMonth(addMonths(today, 6)));
picker.goToToday();
picker.setOptions({ season: true, outsideDays: false });
picker.setDate(null);

Headless calendar state

Use the DOM-free package for custom renderers, server validation or tests. This state inspector calls @litopis/core directly and generates no calendar markup.

ts

import {
  createCalendarState,
  moveFocus,
  selectFocusedDate,
} from "@litopis/core";

let state = createCalendarState({ selected: today, today });

state = moveFocus(state, "next-week");
state = selectFocusedDate(state);

state.focusedDate; // { day, month, year }
state.selected;    // { day, month, year } | null