Calendar

Calendar is a themeable, accessible date picker component powered by Pikaday and styled with DaisyUI. It supports custom skeleton loading, flexible options, and v-model integration.

Components

The Calendar components include the following:

Calendar - Themeable date picker input styled with DaisyUI.
CalendarInput - Input-based date picker styled with DaisyUI.
CalendarSkeleton - Loading skeleton for Calendar

Calendar

The Calendar component is a themeable, accessible date picker powered by Pikaday and styled with DaisyUI. It supports v-model, custom options, and auto-default behaviors.

Calendar Props	Type	Description
modelValue	Date \| string \| null	v-model The bound value. Accepts a Date object, ISO string, or null.
options	Partial<PikadayOptions>	Additional Pikaday options (except `field`).
ariaLabel	string	Sets aria-label for accessibility (applies when bound is set).
format	string	Output format for .toString() and field value (default: 'D MMM YYYY').
formatStrict	boolean	Use strict date parsing (requires Moment.js for custom formatting).
toString	function	Custom function for formatting the date string.
parse	function	Custom function for parsing input string to a date.
defaultDate	Date	Initial date to view when first opened.
setDefaultDate	boolean	Make the defaultDate the initial selected value.
firstDay	number	First day of the week (0: Sunday, 1: Monday, etc).
minDate	Date	Minimum/earliest selectable date.
maxDate	Date	Maximum/latest selectable date.
disableWeekends	boolean	Disallow selection of Saturdays or Sundays.
disableDayFn	function	Callback to disable selection for specific days.
yearRange	number \| [number, number]	Years before/after or explicit min, max year range.
showWeekNumber	boolean	Show ISO week number at the head of the row.
pickWholeWeek	boolean	Select a whole week instead of a day.
isRTL	boolean	Reverse the calendar for right-to-left languages.
i18n	object	Language defaults for month and weekday names.
yearSuffix	string	Additional text to append to the year in the title.
showMonthAfterYear	boolean	Render the month after year in the title.
showDaysInNextAndPreviousMonths	boolean	Render days from next/previous months in the calendar grid.
enableSelectionDaysInNextAndPreviousMonths	boolean	Allow selection of days in next/previous months.
numberOfMonths	number	Number of visible calendars.
events	array	Array of dates to highlight as events.
autoDefault	boolean	If true, defaults to today when no value is provided.

Calendar Events	Arguments	Description
update:modelValue		v-model Emitted when the date changes.
update:inputValue		Emitted when the formatted input value changes.

Calendar Slots	Description
default	The default slot for custom input rendering (not commonly used).

The CalendarInput component provides a classic input-based date picker using Pikaday and styled with DaisyUI input classes. It is fully compatible with all DaisyUI input props (color, size, validation, etc.), supports v-model, and is focus-stealing safe. The input always displays a formatted date string and opens a dropdown calendar on focus. It is suitable for forms and scenarios where users expect to type or pick a date from a calendar overlay.

CalendarInput Props	Type	Description
modelValue	Date \| string \| number \| null	v-model The bound value. Accepts a Date object, ISO string, number (timestamp), or null.
options	Partial<PikadayOptions>	Additional Pikaday options (except `field`). In addition to the below options, all of the Calendar options are also available..
bound	boolean	Automatically show/hide the datepicker on field focus (default: true).
position	string	Preferred position of the datepicker relative to the field (e.g. 'bottom left').
reposition	boolean	Reposition datepicker within the viewport (default: true).
autoDefault	boolean	If true, defaults to today when no value is provided.
placeholder	string	Input placeholder text.
disabled	boolean	Disables the input.
validator	boolean	Enables validation styling.
join	boolean	Enables DaisyUI join-item styling.
color	string	DaisyUI color (primary, secondary, accent, etc.).
primary	boolean	Applies primary color styling.
secondary	boolean	Applies secondary color styling.
accent	boolean	Applies accent color styling.
info	boolean	Applies info color styling.
success	boolean	Applies success color styling.
warning	boolean	Applies warning color styling.
error	boolean	Applies error color styling.
ghost	boolean	Applies ghost input styling.
size	'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'	DaisyUI input size.
xl	boolean	Shortcut for size="xl".
lg	boolean	Shortcut for size="lg".
md	boolean	Shortcut for size="md".
sm	boolean	Shortcut for size="sm".
xs	boolean	Shortcut for size="xs".

CalendarInput Events	Arguments	Description
update:modelValue		v-model Emitted when the date changes.
update:inputValue		Emitted when the formatted input value changes.

CalendarSkeleton

The CalendarSkeleton component displays a loading placeholder styled to match the Calendar layout, including support for multiple stacked months. Use it to indicate loading states for the Calendar component and avoid layout shift.

CalendarSkeleton Props	Type	Description
numberOfMonths	number	Number of months to display in the skeleton (default: 1). Set to match the `numberOfMonths` option in Calendar for consistent loading UI.

Examples

Min/Max Date

Restrict the selectable date range to between today and one month from now.

Code Example

MinMax.vue

Disable Weekends

Prevent users from selecting Saturdays or Sundays.

Code Example

DisableWeekends.vue

Year Range

Limit the year picker to between 1990 and 2030.

Code Example

YearRange.vue

Multiple Months

Show two months vertically for more visibility.

Code Example

MultipleMonths.vue

Custom Format

Display and parse dates in ISO format (YYYY-MM-DD).

To implement a custom display format, provide a toString function in the Pikaday options. This function receives the selected date and the format string as arguments. You can use a plain JavaScript function to format the date as needed, as shown in the example below.