Svelte

@litopis/svelte provides the litopisDatePicker action.

Installation

npm install @litopis/svelte svelte

svelte

<script lang="ts">
  import { litopisDatePicker } from "@litopis/svelte";
  import "@litopis/dom/styles/base.css";
</script>

Example

Value: current date

Options

Pass DatePickerOptions as the action value. Use onValueChange to receive the selected date.

svelte

<script lang="ts">
  import { litopisDatePicker } from "@litopis/svelte";
  import type { DatePickerOptions, DateValue } from "@litopis/dom";

  let date: DateValue | null = null;

  const options: DatePickerOptions = {
    mode: "popover",
    label: "Start date",
    onValueChange(value) {
      date = value;
    },
  };
</script>

<div use:litopisDatePicker={options}></div>

Updating options

Updating the action value calls setOptions() on the existing date picker.

svelte

<script lang="ts">
  let compact = false;
  $: options = {
    mode: "popover" as const,
    size: compact ? "compact" as const : "comfortable" as const,
  };
</script>

<div use:litopisDatePicker={options}></div>

Range

The action takes the same DatePickerOptions; range is a selection mode, not another action.

svelte

<script lang="ts">
  let stay = { start: null, end: null };
  $: options = {
    selection: "range", name: { start: "from", end: "to" }, range: stay,
    onRangeChange: (value) => stay = value,
  };
</script>

<div use:litopisDatePicker={options}></div>

Custom input

Place an input with slot="input" inside the action host. Litopis keeps its classes and placeholder while supplying the picker behavior and accessibility attributes.

svelte

<div use:litopisDatePicker={options}>
  <input slot="input" class="my-input" placeholder="Choose a date" />
</div>

Styling

Add classes to the action element. Import one Litopis stylesheet in your application entry.

Styling guide →