Knockout Bindinghandler With Eonasdan Datepicker Does Not Fire Dp.change Event When Selecting Date

I'm using Knockout(ver 3.4.2), moment(ver 2.29.1) and Eonasdan datepicker (ver 4.17.47) plugin för selecting dates. My problem is that the dp.change event is not fired when the us

Solution 1:

Seems to work just fine. I added a console.log statement to the dp.change handler and also added a text-binding to show the current value for Startdatum. The handler gets called and the value is updated. Have a look at the snippet below:

ko.bindingHandlers.datepicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {
    //initialize datepicker with some optional optionsvar options = allBindingsAccessor().datepickerOptions || {};
    $(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 != null && !(event.dateinstanceofDate)) {
          value(event.date.toDate());
        } else {
          value(event.date);
        }
      }
      console.log(`Changed to ${value()}`);
    });

    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 widgetif (picker) {
      var koDate = ko.utils.unwrapObservable(valueAccessor());

      //in case return from server datetime i am get in this form for example /Date(93989393)/ then fomat this//koDate = (typeof (koDate) !== 'object') ? new Date(parseFloat(koDate.replace(/[^0-9]/g, ''))) : koDate;

      picker.date(koDate);
    }
  }
};

var exportLicenserModel = function() {
  var self = this;
  self.Startdatum = ko.observable((newmoment()).month(0).date(1));
}

ko.applyBindings(newexportLicenserModel());

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"rel="stylesheet"/><linkhref="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script><divclass='input-group js-date'style="position: relative"><inputtype="text"class="form-control"id="licenseStartDate"data-bind="datepicker: Startdatum, datepickerOptions: { locale: 'sv', format: 'YYYY-MM-DD', useCurrent: false }" /><spanclass="input-group-addon"><spanclass="glyphicon glyphicon-calendar"></span></span></div><p>StartDatum: <strongdata-bind="text: Startdatum"></strong></p>

Solution 2:

I found the reason why it seemed the dp.change event didn't fire.

There was a old and obsolete jQuery class in the project that looked up marked datepickers and activated them, making them bind twice.

$('.js-date').datetimepicker({ locale: 'sv', format: 'YYYY-MM-DD', useCurrent: false });

After removing this, everything worked as expected.