highlighted dates setting to null does not remove highlighted dates

[Shashank-Bhatt1]

This feature usually is already available in let's say rangepicker libraries but i am trying to implement it here with custom logic.

So basically when user select start date and end date with two different textboxes with individual datepicker instance applied to both of them, i am trying to find range of all the dates that falls between them. I am trying to use native feature of this library called highlightedDates for this purpose.

So basically code looks like this. Sorry but this is not entire but only sort of necessary.

$('#enddate').datetimepicker({
    onSelectDate: function (ct, $input) {
        highlightdate();
    },
})

$('#startdate').datetimepicker({
    onSelectDate: function (ct, $input) {
        highlightdate();
    },
})

function dateRange(startDate, endDate, steps = 1) {
    const dateArray = [];
    let currentDate = new Date(startDate);

    while (currentDate <= new Date(endDate)) {
        dateArray.push(new Date(currentDate).toLocaleDateString('en-US'));
        currentDate.setUTCDate(currentDate.getUTCDate() + steps);
    }
    return dateArray;
}


function highlightdate() {
    let startdt = $('#startdate').datetimepicker('getValue');
    let enddt = $('#enddate').datetimepicker('getValue');


    if (startdt && enddt && enddt > startdt) {
        const dates = dateRange(startdt, enddt);

        $('#startdate, #enddate').datetimepicker(
            'setOptions', { highlightedDates: dates })
    } else {
        $('#startdate, #enddate').datetimepicker(
            'setOptions', { highlightedDates: [] })
    }
}

So basically what it does is first checking on selecting any of the dates whether both date exists or not and then if enddate is later than returns date array of all dates that falls between them and then i am using already provided highlightdates option rather then custom code to style the calendar as per requirement.

This is working perfectly fine and i am getting this ui when i select any of the two dates. Ui looks like this. Start date is 21th feb 2022 and end date is 25th feb 2022.

But when i am trying to reset the highlighted dates when clicking one reset button, then it is not removing them.

$('#startdate, #enddate').datetimepicker('setOptions', {highlightedDates: []})

[mohammedkhan]

I have a similar issue, where changing the value (in my case not null) of highlightedDates doesn't work:

$j(document).on('change', '#review_date', function() {
	initialiseHighlightedDatePicker();
});

function initialiseHighlightedDatePicker() {
	var LocalDate = JSJoda.LocalDate;
	var DateTimeFormatter = JSJoda.DateTimeFormatter;
	var Period = JSJoda.Period;
	var startDate = $j("#review_date").val();
	var endDate = LocalDate.parse(startDate, DateTimeFormatter.ofPattern('dd/MM/yyyy')).plus(Period.parse("${job.getVacancyPeriod().toString()}")).format(DateTimeFormatter.ofPattern('yyyy/MM/dd'));
	var startDateFormatted = LocalDate.parse(startDate, DateTimeFormatter.ofPattern('dd/MM/yyyy')).format(DateTimeFormatter.ofPattern('yyyy/MM/dd'));
	$j.datetimepicker.setLocale('en-GB');
	$j(".highlighted-datepicker").datetimepicker({ timepicker:false, format:'d/m/Y', lazyInit:true, scrollInput:false, dayOfWeekStart:1, highlightedPeriods:[startDateFormatted + "," + endDate] });
}

In this context when the review_date field is updated then the input field of class highlighted-datepicker needs to be updated to start it's highlighting from review_date. On initialising the page this is fine, but when updating review_date to a different value it doesn't work.

This seems like a problem that's been around for a while: https://stackoverflow.com/questions/40401590/xdan-datetimepicker-datetimepickersetoptions-highlighteddates-i, https://stackoverflow.com/questions/40350754/xdan-datetimepicker-using-knockout-can-not-update-highlihted-days-dynamicaly (neither of these solutions cater for my scenario).