Working examples

Date picker guides

Single dates, bounds, locales, popovers and controller methods.

Single date

Mount a picker and submit an ISO YYYY-MM-DD value.

import { getToday } from "@litopis/core";
import { createDatePicker } from "@litopis/dom";

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

picker.getISOValue();

Min and max

Calendar cells outside the allowed range are disabled by the shared state layer, so adapters do not implement the rule again.

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

const today = getToday();

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

Date format and week start

Display format is explicit. Week start follows locale by default and can be overridden.

createDatePicker(root, {
  firstDayOfWeek: 6,
  format: "mm/dd/yyyy",
  label: "Weekend trip",
});

Localization

locale is a BCP 47 tag used for month names, weekday labels and ARIA text through native Intl. Leave it out to use the browser language; outside a browser the default is en-US. Unsupported or invalid locales also fall back to en-US. Week start uses native locale data when available, with compact region data only for browsers that do not expose it. Calendar math is proleptic Gregorian, so historical Julian/Gregorian cutovers are not modeled.

createDatePicker(root, {
  format: "dd.mm.yyyy",
  label: "Date",
  locale: "uk-UA",
});

createDatePicker(root, {
  firstDayOfWeek: 1,
  locale: "en-US",
});

Input popover

Use popover mode when the calendar should open over the page. It uses the browser popover top layer and CSS anchor positioning.

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

Programmatic state

Use the controller to update the value, visible month or options.

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

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

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

Typed values

Litopis uses plain date values internally and converts at the boundary. That avoids local time shifts while still leaving room for JavaScript Date integration.

Internal value	`{ day, month, year }`, years `0001` to `9999`
Form value	`YYYY-MM-DD`
Input masks	`yyyy-mm-dd`, `dd.mm.yyyy`, `mm/dd/yyyy`
Adapter value	`DateValue` by default; the DOM controller can expose native `Date` values with `valueAs: "date"`.