changelog

What changed, release by release. Newest first.

! breaking+ new~ fix

2.0.0-beta.0

tag: beta · qwik v2 · 2026-10-29

qwik-date 2 is built for Qwik v2 and only does the calendar now: the DatePicker is gone, and you put the Calendar in a popover with a trigger of your own. Zero runtime dependencies.

New on top: ranges, several days, two months side by side, min and max dates, forms, any locale and a headless version.

$ pnpm add -D -E qwik-date@beta

breaking

  • Needs Qwik v2 (@qwik.dev/core). The CommonJS build is gone.
  • Needs Node 22.12 or later: Node 20 is no longer supported.
  • Everything is exported from qwik-date. qwik-date/inline and qwik-date/picker are gone.
  • DatePicker is removed. Put the Calendar in a popover instead.
  • date, bind:date and onDateChange$ are now value, bind:value and onChange$. The value is selected from the start.
  • unStyled is now unstyled.
  • iconLeft and iconRight are now prevIcon and nextIcon, and the action*Props are now navButtonProps, prevButtonProps and nextButtonProps.
  • CalendarProps is a type alias: extend it with an intersection, not an interface.
  • labels has new texts, required for locales other than en and es.
  • An aria-label in containerProps is now followed by the selection, and containerProps no longer takes onChange$.
  • The title is a button that opens the months and the years: Tab stops on it in browsers that tab to buttons.
  • The selected day's button has data-selected: aria-selected moved to its cell, the gridcell.

new

  • Select a range with mode="range", with a preview under the pointer.
  • Select several days with mode="multiple".
  • Show months side by side with months.
  • Rule out days with min, max, disabledDates and disabledWeekdays.
  • Choose the month and the year from the title.
  • qwik-date/headless: the calendar in parts, and useCalendar().
  • Submit the value with a form through name.
  • Any locale through Intl, with labels and weekStartsOn.
  • A theme prop: light, dark or auto.
  • autoFocus, to focus a day when the calendar shows up.
  • formatDate and formatDateRange, to show the value in a trigger.
  • data-direction on the calendar and its rows, to animate month changes with CSS.
  • Recipes for a date picker: native popover, floating-ui.

fixes

show 24 fixeshide the fixes
  • Icons keep their size in unstyled calendars.
  • Keys pressed back to back land on the right day.
  • The grid is named after the month it shows.
  • Better contrast for weekday names and week numbers.
  • Dates whose day doesn't exist in their month are rejected.
  • Arrow keys are mirrored in right-to-left layouts.
  • The default day is the visitor's, not the server's.
  • The calendar has a readable, complete accessible name.
  • Month chevrons flip in right-to-left layouts.
  • useStyles$ is called unconditionally.
  • Library styles stay off unstyled calendars.
  • Rows are numbered after their ISO week.
  • The selected day is exposed to assistive technology.
  • The binding works in both directions.
  • Home and End go to the start and end of the focused row.
  • Only the keys the grid handles are cancelled.
  • The focus stays on the month buttons after changing month.
  • PageUp and PageDown land on a day that exists in the target month.
  • Day buttons are looked up inside the calendar's own element.
  • The focus doesn't move when the calendar first becomes visible.
  • Week numbers are computed in local time.
  • Keyboard navigation dates are computed in local time.
  • The default date is the local day.
  • Calendar buttons inherit the page font.

upgrading from 1.x

  1. Move your app to Qwik v2. qwik-date 2 needs @qwik.dev/core and Node 22.12 or later, and ships ESM only.
  2. Install qwik-date@beta.
  3. Import everything from qwik-date. The /inline and /picker entry points are gone.
  4. Rename the props, as in the diff below.
  5. Replace the DatePicker with the popover recipe, and format the trigger with formatDate().
  6. For locales other than en and es, pass labels.
renames.diff−10 +10
−import { CalendarInline } from 'qwik-date/inline';
+import { Calendar } from 'qwik-date';
−date · bind:date · onDateChange$
+value · bind:value · onChange$
−unStyled
+unstyled
−iconLeft · iconRight
+prevIcon · nextIcon
−actionButtonProps
+navButtonProps
−actionLeftProps · actionRightProps
+prevButtonProps · nextButtonProps
−triggerLabel · triggerIcon · triggerProps
+your own trigger + formatDate()
−[data-preselected]
+[aria-current="date"]
−button[aria-selected="true"]
+button[data-selected]
−interface Props extends CalendarProps
+type Props = CalendarProps & Extra

git log v1.0.0..v2.0.0-beta.0 →

1.0.0

tag: latest · qwik v1 · 2024-08-02

The first release, for Qwik v1 (@builder.io/qwik).

  • CalendarInline from qwik-date/inline, also exported as Calendar.
  • DatePicker from qwik-date/picker: a trigger and a popup placed with floating-ui.
  • Week numbers, full weeks, weekday names and locale.
  • Props for every part of the calendar, and unStyled.
$ pnpm add -D -E qwik-date@1