javascript - datetimepicker bootstrap 可观察 knockout 中的 minDate 和 maxDate

Question

我正在使用插件 bootstrap-datetimepicker 和 Knockout js。我已经完成了一个处理程序来动态管理 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>