Knockout.js 未在日期选择器中设置minDate
以下是我在视图中使用日期选择器的方式:Knockout.js 未在日期选择器中设置minDate,knockout.js,bootstrap-datepicker,Knockout.js,Bootstrap Datepicker,以下是我在视图中使用日期选择器的方式: 带有span的最后一行工作正常。我创建这个跨度只是为了检查我的模型是否有正确的值。但是日期选择器没有拾取该值,我不确定原因。 未设置日期选择器的minDate;换句话说,我无法设置日期选择器的最小日期。请注意,以下各项工作正常: minDate: new Date() or minDate:new Date('01/10/2015') 这是行不通的。如果我尝试调试绑定处理程序,则在所有这些情况下,date的值要么未定义,要么无效: minDate
带有span的最后一行工作正常。我创建这个跨度只是为了检查我的模型是否有正确的值。但是日期选择器没有拾取该值,我不确定原因。
未设置日期选择器的minDate
;换句话说,我无法设置日期选择器的最小日期。请注意,以下各项工作正常:
minDate: new Date() or
minDate:new Date('01/10/2015')
这是行不通的。如果我尝试调试绑定处理程序,则在所有这些情况下,date的值要么未定义,要么无效:
minDate: new Date(viewModel.datePickerMinDate()) OR
minDate: viewModel.datePickerMinDate() OR
minDate: viewModel.datePickerMinDate
下面是我的绑定处理程序的代码
ko.bindingHandlers.datePicker = {
init: function (element, valueAccessor, allBindings) {
var minDate = moment(allBindings.get('minDate') || ''),
maxDate = moment(allBindings.get('maxDate') || ''),
options = {
minDate: minDate.isValid() ? minDate.toDate() : undefined,
maxDate: maxDate.isValid() ? maxDate.toDate() : undefined,
onClose: function () { if ($.fn.valid) $(this).valid(); },
dateFormat: allBindings.get('format') || GGS.dateFormats.pickerDateFormat
},
dp = $(element).datepicker(options);
console.log('minDate ' + minDate + ' ' + moment.utc($("#ChartStartDate").val()).format('MM/DD/YYYY'));
dp.change(function () {
var observable = valueAccessor(),
unwrapped = ko.unwrap(observable)
current = unwrapped ? moment.utc(unwrapped) : null,
raw = dp.datepicker("getDate"),
localValue = raw ? moment(raw) : null, //n.b. not UTC; stupid jQuery UI
value = localValue ? moment.utc([localValue.year(), localValue.month(), localValue.date()]) : null //extract the date part to a UTC date
if (!value || (!current || !current.isSame(value, 'day'))) {
console.log('value = ' + value.toDate());
observable(value ? value.toDate() : value);
}
});
},
update: function (element, valueAccessor) {
var dp = $(element);
var observable = valueAccessor(),
unwrapped = ko.unwrap(observable),
value = unwrapped ? moment.utc(unwrapped) : null,
localValue = value ? moment([value.year(), value.month(), value.date()]) : null //make sure that jQuery UI shows the date we expect, rather than trying to convert to local time
;
dp.datepicker("setDate", localValue ? localValue.toDate() : localValue);
dp.blur();
},
}
正如评论中提到的,你只需要这样做 查看:
<input type="text" class="form-control datepicker" data-bind="datePicker:targetDate, minDate:datePickerMinDate()" />
<span id="temp" data-bind="text:targetDate"></span>
var ViewModel = function () {
var self = this;
self.targetDate = ko.observable('01/10/2015');
self.datePickerMinDate = ko.observable('01/10/2015');
};
//In bindingHandler update
update: function (element, valueAccessor) {
var dp = $(element);
var observable = valueAccessor(),
unwrapped = ko.unwrap(observable)
//here you have to format the Date before setting
$(element).datepicker("setDate", unwrapped);
dp.blur();
}
为参考而工作的小提琴寻找类似的东西。您可以将
new Date()
更改为任何可观察的,您可以在其中传递自己的自定义最小日期。如果有任何问题,请进一步告诉我,这是您的代码。干杯。谢谢。它成功了!!