datetimepicker bootstrap minDate and maxDate in observable knockout

Question

I am using the plugin bootstrap-datetimepicker with knockout js. I've done a handler to dynamically manage and MaxDate MinDate, as I show below:

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());                
        }
    }
};

I use it as follows:

<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>

The problem is when change the NuevaTarea.minDate and NuevaTarea.maxDate, the date of MaxDate is assigned to NuevaTarea.FechaInicio.

Someone could help me create an observable MaxDate MinDate and properly functioning? No I'm doing wrong.

The version of plugin is 4.15.35. https://github.com/Eonasdan/bootstrap-datetimepicker

Answer 1

Thanks for your help but I already solved only just set, useCurrent: false options.

<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>

Answer 2

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>