在日期选择器上突出显示当前日期

Question

我基本上想加载日历并突出显示当前日期，但是当我单击清除按钮时也要清除日期。

我尝试使用todayHighlight：true突出显示当前日期，但是单击清除后不会清除。帮助将不胜感激。下面的代码：

deliveryDateSelectorViewModel.prototype.loadAllDates =函数（）{         var self = this;

    var options = {
        format: self.dateFormat(),
        clearBtn: true,
        beforeShowDay: function () {
            return { enabled: true, classes: "text-success bold", tooltip: null };
        }
    };

    if (self.disableDatesBefore) {
        var start;

        if (self.disableDatesBefore instanceof Date) {
            start = self.disableDatesBefore;
        } else {
            start = new Date(self.disableDatesBefore);
        }

        options.startDate = start;
    }
    else {
        options.startDate = new Date();
        self.selectedDate(new Date());
    }

    var datepicker = self.div.datepicker(options);

    datepicker.on("changeDate", function (e) {
        if (e.date) {
            if (self.isoDate) {
                var date = $(e.target).datepicker("getUTCDate");
                self.selectedDate(date.toISOString());
            } else {
                self.selectedDate(e.format());
            }
        }
    })
       .on("clearDate", function () {
            self.selectedDate(null);
        });

    $(".clear()").click(function () {
        datepicker.data('datepicker').setDate(null);
    });

    var selectedDate = self.selectedDate();

    if (selectedDate) {
        self.div.datepicker("setDate", self.isoDate ? moment(new Date(self.selectedDate())).format("DD/MM/YYYY") : selectedDate);
    }

    return;
};

deliveryDateSelectorViewModel.prototype.setDates = function (data) {
    var self = this;

    if (!data) {
        self.error("No delivery dates available");

        return;
    }

    var dates = data;

    self.cutoffTime(data.CutoffTime && data.CutoffTime.length > 5 ? data.CutoffTime.substr(0, 5) : data.CutoffTime);

    self.scheduleName(data.Name);

    self.availableDates(ko.utils.arrayMap(dates, function (d) {
        return d.toDate();
    }));

    self.div.datepicker("remove");

    if (dates.length) {
        self.selectedDate(dates[0]);
        self.div.datepicker({
            clearBtn: true,
            startDate: dates[0].toDate(),
            endDate: dates[dates.length - 1].toDate(),
            format: self.dateFormat(),
            beforeShowDay: function(date) {

                var dateMatch = ko.utils.arrayFirst(self.availableDates(),
                    function(d) {

                        var availableDateOffset = d.getTimezoneOffset();
                        var availableDate = moment(d);
                        var offset = availableDateOffset < 0 ? Math.abs(availableDateOffset) : availableDateOffset;

                        var dstAdjustedCalendarDate = moment(date).add(offset, 'm');

                        return availableDate.isSame(dstAdjustedCalendarDate);
                    });

                return dateMatch
                           ? { enabled: true, classes: "text-success bold", tooltip: null }
                           : { enabled: false, classes: "paler" };
            },
            defaultViewDate: moment(self.selectedDate()).format("DD/MM/YYYY")
        }).on("changeDate",
            function(e) {
                if (self.disable()) {
                    return;
                }
                if (!e.date) {
                    self.selectedDate(e.format());
                } else if (self.isoDate) {
                    var date = $(e.target).datepicker("getUTCDate");

                    if (isNaN(date.getTime())) {
                        // Date is not valid
                        self.selectedDate(null);
                    } else {
                        self.selectedDate(date.toISOString());
                    }
                } else {
                    self.selectedDate(e.format());
                }
            });

        var selectedDate = self.selectedDate();

        if (selectedDate) {
            self.div.datepicker("setDate", self.isoDate ? moment(new Date(self.selectedDate())).format("DD/MM/YYYY") : selectedDate);
        }

        return;
    }

    self.error("No delivery dates available");
};

ko.components.register('delivery-date-selector', {
    viewModel: {
        createViewModel: function (params, componentInfo) {
            return new deliveryDateSelectorViewModel(params, componentInfo.element);
        }
    },
    template: deliveryDateSelectorTemplate
});

}）;