qwik-date@1
The 1.x line, for Qwik v1: an inline calendar and a popup date picker.
install
qwik-date 1.x works with Qwik v1 (@builder.io/qwik).
$ pnpm add -D -E qwik-date@1@1 keeps you on 1.x once 2.0 is the latest.
noteMoving to Qwik v2? 2.x renames a few props and drops the DatePicker. See upgrading from 1.x.
calendar-inline
The calendar on the page. Import it from qwik-date/inline, or as Calendar from qwik-date.
src/routes/index.tsx
import { component$, useSignal } from '@builder.io/qwik';
import { CalendarInline } from 'qwik-date/inline';
export default component$(() => {
const date = useSignal('2026-10-29');
return (
<CalendarInline
date={date.value}
onDateChange$={(newDate) => console.log({ newDate })}
/>
);
});| prop | description | default |
|---|---|---|
date | The date to display. | today |
onDateChange$ | Called when the date changes. | – |
fullWeeks | Shows full weeks. | false |
locale | The locale of the calendar. | 'en' |
showWeekNumber | Shows the week numbers. | false |
showDaysOfWeek | Shows the weekday names. | true |
iconLeft, iconRight | Icons for the month buttons. | – |
unStyled | Removes the default styles. | false |
containerProps, … | Props for each part: headerProps, actionButtonProps, actionLeftProps, actionRightProps, calendarProps, theadProps, tbodyProps, theadRowProps, tbodyRowProps, headerCellProps, cellProps, dayButtonProps, iconProps, titleProps and weekNumberProps. | – |
date-picker
A trigger and a popup calendar, placed with floating-ui. Import it from qwik-date/picker, or from qwik-date.
src/routes/index.tsx
import { component$, useSignal } from '@builder.io/qwik';
import { DatePicker } from 'qwik-date/picker';
export default component$(() => {
const date = useSignal('2026-10-29');
return (
<DatePicker
date={date.value}
onDateChange$={(newDate) => console.log({ newDate })}
triggerLabel="Select Date"
/>
);
});| prop | description | default |
|---|---|---|
triggerLabel | The text of the trigger button. | – |
triggerIcon | An icon for the trigger button. | – |
triggerProps | Props for the trigger button. | – |
mode | 'popup' or 'inline'. | 'popup' |
… | Every prop of CalendarInline. | – |