可觀察到的淘汰賽中的datetimepicker引導程序minDate和maxDate

Question

我正在使用帶有剔除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

Answer 1

 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> 

Answer 2

感謝您的幫助，但我只解決了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>