Я хочу загрузить календарь и выделить текущую дату, а также очистить дату, когда нажимаю кнопку очистки.
Я попытался использовать todayHighlight: true, который выделяет текущую дату, но не очищается, когда я нажимаю кнопку очистить.Помощь будет принята с благодарностью.Код ниже:
deliveryDateSelectorViewModel.prototype.loadAllDates = function () {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
});
});