Calendar

Basic

The Calendar component is used for selecting dates. It supports various customization options.

<Calendar v-model="date"></Calendar>

The basic usage of the Calendar component involves binding a data property using the v-model directive. This directive automatically syncs the calendar value with the specified data property, allowing for two-way data binding.

Additional Parameters

The paramsDatePicker prop allows you to specify additional parameters for date picker behavior and formatting. It accepts an object with various configuration options.

<Calendar 
    :paramsDatePicker="{ isRange: true, placeholder: 'Select date range' }" 
    v-model="date">
</Calendar>

AutoFocus

The autoFocus prop automatically focuses the calendar input on mount.

<Calendar 
    autoFocus 
    v-model="date">
</Calendar>

Prevent Closing

The isNotCloseOnDateChange prop prevents the calendar from closing when a date is selected.

<Calendar 
    isNotCloseOnDateChange 
    v-model="date">
</Calendar>

Fix Window Position

The paramsFixWindow prop allows you to configure the calendar window's positioning behavior.

<Calendar 
    :paramsFixWindow="{ position: 'bottom-left', marginPx: 10 }" 
    v-model="date">
</Calendar>

Custom CSS

Class for Data Picker

The classDataPicker prop allows you to apply custom CSS classes to the data picker element.

<Calendar 
    classDataPicker="custom-data-picker-class" 
    v-model="date">
</Calendar>

Class for Calendar Picker

The classPicker prop allows you to apply custom CSS classes to the calendar picker element.

<Calendar 
    classPicker="custom-calendar-picker-class" 
    v-model="date">
</Calendar>

Class for Displayed Date Text

The classDateText prop allows you to apply custom CSS classes to the displayed date text.

<Calendar 
    classDateText="custom-date-text-class" 
    v-model="date">
</Calendar>