The calendar component is a web component that displays a calendar with the ability to select a date.

The calendar component is using the dayjs library to handle dates. The best way to use the calendar component if you are using the dayjs library in your project. The component settings are properties, not attributes, so you have to set them in JavaScript.

The calendar component can be used to select a date. The default date is the current date.

<dap-ds-calendar></dap-ds-calendar>

The value property can be used to set the selected date.

const calendar = document.querySelector('dap-ds-calendar')
calendar.value = dayjs().add(1, 'day')

The currentDate property can be used to set the current visible date. Only the month and year are considered.

const calendar = document.querySelector('dap-ds-calendar')
calendar.currentDate = new Date('2022-08-15T22:00:00.000Z')
calendar.value = dayjs('2022-08-13T22:00:00.000Z')

The minDate and maxDate properties can be used to set the minimum and maximum date of the calendar. Only the month and year are considered.

In this example the minDate is set to the previous month and the maxDate is set to the next month, so you can do the paging only between the previous and next month.

const calendar = document.querySelector('dap-ds-calendar')
calendar.minDate = dayjs().add(-1, 'month')
calendar.maxDate = dayjs().add(1, 'month')
calendar.value = dayjs()

The disabledDate property can be used to set a function to determine if the date is disabled. The function should return true if the date is disabled.

In this example the disabledDate function is set to disable the weekends.

const calendar = document.querySelector('dap-ds-calendar')
calendar.disabledDate = (date) => date.day() === 0 || date.day() === 6

import { DapDSCalendar } from 'dap-design-system/dist/dds'

import { DapDSCalendarReact } from 'dap-design-system/dist/react'

No slots available.