Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.38k stars 137 forks source link

Enhanced Custom Class Support for Datepicker Selections #926

Closed haritha2112 closed 3 days ago

haritha2112 commented 2 weeks ago

Is your feature request related to a problem? Please describe. I would like to have the ability to add more custom classes to the datepicker for better differentiation in the following scenarios:

  1. When a single date is selected, apply a custom class to the selected date, distinguishing it from unselected dates.
  2. When a date range is selected, custom classes for the start date, end date, and the dates in between, to differentiate them from unselected dates.
  3. When a week range is selected, custom classes for the start week, end week, and the weeks in between, to set them apart from unselected weeks.
  4. Custom class for disabled dates
  5. Custom class for Today's date

Currently, via the UIOptions interface's calendarCell property, we can only set the same class name for all cells irrespective of their state.

Describe the solution you'd like Additional options to the UIOptions object can be provided to accommodate the above request.

Describe alternatives you've considered We currently have automated tests in place that use a combination of custom classes passed to UIOptions and existing library classes (prefixed with dp) to target the desired cells. Example: document.querySelector('.myapp-custom-cell-class.dp__range_start') However, we believe that relying on the library's internal classes may not be a reliable long-term approach.

Jasenkoo commented 3 days ago

You can use a day-class prop and set a custom class for any date you need