Qwik calendar, simple integration

qwik-date is an opinionated calendar component designed for the Qwik framework. It offers two main versions: an inline calendar and a popup date picker, providing flexibility in how you integrate it into your applications.

You can install qwik-date using any of the following package managers:

npm install -D -E qwik-date
pnpm add -D -E qwik-date
bun add -D -E qwik-date
yarn add -D -E qwik-date

The inline calendar can be imported in two ways:

import { Calendar } from 'qwik-date';
import { CalendarInline } from 'qwik-date/inline';

Here's a basic example of how to use the inline calendar:

import { component$, useSignal } from '@builder.io/qwik';
import { CalendarInline } from 'qwik-date/inline';
export default component$(() => {
 const date = useSignal('2023-07-23');
 
 return (
 <CalendarInline 
 date={date.value} 
 onDateChange$={(newDate) => console.log({ newDate })} 
 />
 );
});

• date: Initial date to display (default: current date).
• fullWeeks: If true, shows full weeks (default: false).
• locale: Locale for the calendar (default: 'en').
• showWeekNumber: If true, shows week numbers (default: false).
• showDaysOfWeek: If true, shows days of the week (削除) Mo, Tu, We, etc. (削除ここまで) (default: true).
• iconLeft, iconRight: Custom icons for navigation buttons.
• containerProps, headerProps, actionButtonProps, actionLeftProps, actionRightProps, calendarProps, theadProps, tbodyProps, theadRowProps, tbodyRowProps, headerCellProps, cellProps, dayButtonProps, iconProps, titleProps, weekNumberProps: Custom props for various parts of the component.
• onDateChange$: Callback for when the date changes.
• unStyled: If true, removes default styling (default: false).

The popup date picker can be imported in two ways:

import { DatePicker } from 'qwik-date';
import { DatePicker } from 'qwik-date/picker';

Here's a basic example of how to use the popup date picker:

import { component$, useSignal } from '@builder.io/qwik';
import { DatePicker } from 'qwik-date/picker';
export default component$(() => {
 const date = useSignal('2023-07-23');
 
 return (
 <DatePicker 
 date={date.value} 
 onDateChange$={(newDate) => console.log({ newDate })}
 triggerLabel="Select Date"
 />
 );
});

• triggerProps: Custom props for the trigger button.
• triggerLabel: Label for the trigger button.
• triggerIcon: Custom icon for the trigger button.
• mode: Mode of the date picker ('popup' or 'inline', default: 'popup').
• All other props from CalendarInline can also be used.

• Add support for additional locales.
• range date selection
• month and year navigation
• Custom date ranges (last 7 days, next 30d)
• Fancy animations (styled version)
• website docs: easy to read, understand and implement.