มีไม่กี่คนที่ขอตัวเลือกวันที่แบบไดนามิก ในกรณีของฉันฉันต้องการช่วงวันที่แบบไดนามิกดังนั้นอินพุตแรกจึงกำหนดค่าต่ำสุดของวินาทีและค่าที่สองจะกำหนดค่าสูงสุดสำหรับช่วงแรก ฉันแก้ไขได้โดยการขยายตัวจัดการ RP Niemeyer ดังนั้นสำหรับต้นฉบับของเขา:
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().datepickerOptions || {},
$el = $(element);
$el.datepicker(options);
ko.utils.registerEventHandler(element, "change", function() {
var observable = valueAccessor();
observable($el.datepicker("getDate"));
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$el.datepicker("destroy");
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
$el = $(element);
if (String(value).indexOf('/Date(') == 0) {
value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
}
var current = $el.datepicker("getDate");
if (value - current !== 0) {
$el.datepicker("setDate", value);
}
}
};
ฉันได้เพิ่มตัวจัดการอีกสองตัวที่ตรงกับตัวเลือกที่ฉันต้องการแก้ไข:
ko.bindingHandlers.minDate = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
current = $(element).datepicker("option", "minDate", value);
}
};
ko.bindingHandlers.maxDate = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
current = $(element).datepicker("option", "maxDate", value);
}
};
และใช้แบบนั้นในเทมเพลตของฉัน:
<input data-bind="datepicker: selectedLowerValue, datepickerOptions: { minDate: minValue()}, maxDate: selectedUpperValue" />
<input data-bind="datepicker: selectedUpperValue, datepickerOptions: { maxDate: maxValue()}, minDate: selectedLowerValue" />