Calendar

import { $, useSignal } from "@builder.io/qwik";
import { Calendar } from "~/components/ui/base/calendar";

export default component$(() => {
  const selected = useSignal<string | undefined>(undefined);
  return (
    <Calendar.Panel
      defaultViewMonth="2026-04-01"
      selected={selected.value}
      onSelect$={$((iso) => {
        selected.value = iso;
      })}
    />
  );
});

import { Calendar } from "~/components/ui/base/calendar";

<Calendar.Root defaultViewMonth="2026-04-01" weekStartsOn={1}>
  <div class="flex flex-col gap-2">
    <div class="flex items-center gap-1 px-0.5">
      <Calendar.PrevButton>
        <span aria-hidden="true">‹</span>
      </Calendar.PrevButton>
      <Calendar.Caption format="MMMM YYYY" />
      <Calendar.NextButton>
        <span aria-hidden="true">›</span>
      </Calendar.NextButton>
    </div>
    <Calendar.Weekdays />
    <Calendar.Grid />
  </div>
</Calendar.Root>

import { $, component$, useSignal } from "@builder.io/qwik";
import { Calendar } from "~/components/ui/base/calendar";

export default component$(() => {
const viewMonth = useSignal("2026-04-01");
const selected = useSignal<string | undefined>(undefined);

return <Calendar.Panel
  viewMonth={viewMonth.value}
  onViewMonthChange$={$((iso) => {
    viewMonth.value = iso;
  })}
  selected={selected.value}
  onSelect$={$((iso) => {
    selected.value = iso;
  })}
  minDate="2026-04-05"
  maxDate="2026-04-25"
/>
});

import { $, component$, useSignal } from "@builder.io/qwik";
import { CalendarInput } from "~/components/ui/base/calendar-input";
import { Field } from "~/components/ui/base/field";
import { Label } from "~/components/ui/base/label";

export const Demo = component$(() => {
  const picked = useSignal("2026-04-12");
  return (
    <Field.Root>
      <Label for="cal-demo">Date</Label>
      <CalendarInput
        inputId="cal-demo"
        value={picked.value}
        placeholder="e.g. April 12, 2026"
        onValueChange$={$((iso) => {
          picked.value = iso;
        })}
      />
    </Field.Root>
  );
});