![](/img/trans.png)
[英]How to allow maxDate and minDate to be equal on Bootstrap DateTimePicker?
[英]datetimepicker bootstrap minDate and maxDate in observable knockout
我正在使用带有剔除js的bootstrap-datetimepicker插件。 我已经完成了一个处理程序来动态管理和MaxDate MinDate,如下所示:
ko.bindingHandlers.dateTimePicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().dateTimePickerOptions || {};
$(element).datetimepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "dp.change", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
if (event.date && event.date != null && !(event.date instanceof Date)) {
value(event.date.toDate());
} else {
//value(event.date);
value(undefined);
}
}
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
var picker = $(element).data("DateTimePicker");
if (picker) {
picker.destroy();
}
});
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var picker = $(element).data("DateTimePicker");
//when the view model is updated, update the widget
if (picker) {
//Usamos moment para convertir a fecha ya que utiliza este plugin adicional datetimepicker
var koDate = moment(ko.utils.unwrapObservable(valueAccessor()) || '');
if (koDate.isValid()) picker.date(koDate.toDate() || null);
}
}
};
ko.bindingHandlers.minDate = {
update: function (element, valueAccessor) {
var value = moment(ko.utils.unwrapObservable(valueAccessor()) || ''),
picker = $(element).data("DateTimePicker");
if (value.isValid() && picker) {
picker.minDate(value.toDate());
}
}
};
ko.bindingHandlers.maxDate = {
update: function (element, valueAccessor) {
var value = moment(ko.utils.unwrapObservable(valueAccessor()) || ''),
picker = $(element).data("DateTimePicker");
if (value.isValid() && picker) {
picker.maxDate(value.toDate());
}
}
};
我使用它如下:
<div class="input-group" data-bind="dateTimePicker: NuevaTarea.FechaInicio, dateTimePickerOptions: { format: 'L', showClear: true }, minDate: NuevaTarea.minDate, maxDate: NuevaTarea.maxDate">
<input type="text" class="form-control" />
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
问题在于,当更改NuevaTarea.minDate和NuevaTarea.maxDate时,MaxDate的日期将分配给NuevaTarea.FechaInicio。
有人可以帮助我创建一个可观察的MaxDate MinDate并正常运行吗? 不,我做错了。
插件的版本是4.15.35。 https://github.com/Eonasdan/bootstrap-datetimepicker
ko.bindingHandlers.dateTimePicker = { init: function (element, valueAccessor, allBindingsAccessor) { //initialize datepicker with some optional options var options = allBindingsAccessor().dateTimePickerOptions || {}; $(element).datetimepicker(options); //when a user changes the date, update the view model ko.utils.registerEventHandler(element, "dp.change", function (event) { var value = valueAccessor(); if (ko.isObservable(value)) { if (event.date && event.date != null && !(event.date instanceof Date)) { value(event.date.toDate()); } else { //value(event.date); value(undefined); } } }); ko.utils.domNodeDisposal.addDisposeCallback(element, function () { var picker = $(element).data("DateTimePicker"); if (picker) { picker.destroy(); } }); }, update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { var picker = $(element).data("DateTimePicker"); //when the view model is updated, update the widget if (picker) { //Usamos moment para convertir a fecha ya que utiliza este plugin adicional datetimepicker var koDate = moment(ko.utils.unwrapObservable(valueAccessor()) || ''); if (koDate.isValid()) picker.date(koDate.toDate() || null); } } }; ko.bindingHandlers.minDate = { update: function (element, valueAccessor) { var value = moment(ko.utils.unwrapObservable(valueAccessor()) || ''), picker = $(element).data("DateTimePicker"); if (value.isValid() && picker) { picker.minDate(value.toDate()); } } }; ko.bindingHandlers.maxDate = { update: function (element, valueAccessor) { var value = moment(ko.utils.unwrapObservable(valueAccessor()) || ''), picker = $(element).data("DateTimePicker"); if (value.isValid() && picker) { picker.maxDate(value.toDate()); } } }; function ViewModel() { var self = this; self.NuevaTarea = { FechaInicio: ko.observable(), FechaFin: ko.observable(), minDate: ko.observable(), maxDate: ko.observable() }; self.NuevaTarea.minDate(new Date()) ; //Not is working apply value null, help here!! I Like that this field is empty on start self.NuevaTarea.FechaInicio(null); } ko.applyBindings(new ViewModel());
body{height:300px; padding:20px;}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script> <div class="form-group"> <label class="control-label">Min Date:</label> <div class="input-group" data-bind="dateTimePicker: NuevaTarea.minDate, dateTimePickerOptions: { format: 'L', showClear: true }"> <input type="text" class="form-control" /> <div class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </div> </div> </div> <div class="form-group"> <label class="control-label">Fecha Inicio:</label> <div class="input-group" data-bind="dateTimePicker: NuevaTarea.FechaInicio, dateTimePickerOptions: { format: 'L', showClear: true }, minDate: NuevaTarea.minDate, maxDate: NuevaTarea.maxDate"> <input type="text" class="form-control" /> <div class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </div> </div> </div>
感谢您的帮助,但我只解决了setCurrent,false选项。
<div class="input-group" data-bind="dateTimePicker: NuevaTarea.FechaInicio, dateTimePickerOptions: { format: 'L', showClear: true, useCurrent: false }, minDate: NuevaTarea.minDate, maxDate: NuevaTarea.maxDate">
<input type="text" class="form-control" />
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.