forms

Give the calendar a name and its value goes with the form around it, like any input.

form.tsx
SuMoTuWeThFrSa
submit to see what the form sends

hidden inputs

With name, the calendar adds hidden inputs with its value, as YYYY-MM-DD:

modeinputswithout a value
singledueempty
rangestay.start, stay.endempty, and the end until it's chosen
multiplea days[] per daynone: nothing is sent

qwik router actions

A routeAction$ gets the value with the rest of the form. Qwik Router builds objects from dotted names and arrays from names ending in []: a range arrives as { stay: { start, end } }, and mode="multiple" as { days: [...] }. A name repeated without [] would keep only the last day.

src/routes/book/index.tsx
import { component$, useSignal } from '@qwik.dev/core';
import { Form, routeAction$ } from '@qwik.dev/router';
import { Calendar, type LocalDate } from 'qwik-date';

export const useBook = routeAction$((data) => {
  // { days: ['2026-10-29', '2026-11-05'] }
  return { days: data.days };
});

export default component$(() => {
  const book = useBook();
  const days = useSignal<LocalDate[]>([]);

  return (
    <Form action={book}>
      <Calendar mode="multiple" bind:value={days} name="days" />
      <button type="submit">Book</button>
    </Form>
  );
});
noteThe inputs are plain text: check the days on the server too, with the same min, max and disabled days the calendar has.
← previousHeadlessnext →Localization