Bootstrap datepicker with knockout.js databind

Bootstrap datepicker with knockout.js databind

Asked on November 28, 2018 in knockout js.
Add Comment


  • 3 Answer(s)

       This sample help to accomplish with the datepicker which is using:

    ko.bindingHandlers.datepicker = {
      init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);
        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "changeDate", function(event) {
          var value = valueAccessor();
          if (ko.isObservable(value)) {
            value(event.date);
          }
        });
      },
      update: function(element, valueAccessor) {
        var widget = $(element).data("datepicker");
        //when the view model is updated, update the widget
        if (widget) {
          widget.date = ko.utils.unwrapObservable(valueAccessor());
          if (widget.date) {
            widget.setValue();
          }
        }
      }
    };
    

       It look like the functionality is normal , so remove that piece. This manage the widgets changeDate event to update the view model, During a user changes the date. The update function manage during the view model is changed to update the widget.

       For bind the value to a non-observable, it require a little more code. Have a glance at this code:

    http://jsfiddle.net/rniemeyer/KLpq7/

    Answered on November 28, 2018.
    Add Comment

       This code also work:

    ko.bindingHandlers.datepicker = {
      init: function (element, valueAccessor, allBindingsAccessor) {
      var unwrap = ko.utils.unwrapObservable;
      var dataSource = valueAccessor();
      var binding = allBindingsAccessor();
      //initialize datepicker with some optional options
      var options = allBindingsAccessor().datepickerOptions || {};
      $(element).datepicker(options);
      $(element).datepicker('update', dataSource());
      //when a user changes the date, update the view model
      ko.utils.registerEventHandler(element, "changeDate", function (event) {
        var value = valueAccessor();
        if (ko.isObservable(value)) {
          value(event.date);
        }
      });
    },
    update: function (element, valueAccessor) {
      var widget = $(element).data("datepicker");
      var value = ko.utils.unwrapObservable(valueAccessor());
      //when the view model is updated, update the widget
      if (widget) {
        widget.date = value;
        if (widget.date) {
          widget.setValue();
          $(element).datepicker('update', value)
        }
      }
    }};
    
    Answered on November 28, 2018.
    Add Comment

    Try this method to use the datepicker with k.o

    ko.bindingHandlers.datepicker = {
      init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = {
          autoclose: true,
          format: 'yyyy-mm-dd',
        }
        //var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);
        //when a user changes the date, update the view model
        ko.utils.registerEventHandler(element, "changeDate", function (event) {
          var value = valueAccessor();
          if (ko.isObservable(value)) {
            var myDate = event.date;
            var month = myDate.getMonth() + 1;
            var monthText = month;
            if (month < 10)
            monthText = "0" + month;
            var day1 = parseInt(myDate.getDate());
            var dayText = day1;
            if (day1 < 10)
            dayText = '0' + day1;
            value(myDate.getFullYear() + '-' + monthText + '-' + dayText);
          }
        });
      },
      update: function (element, valueAccessor) {
        var widget = $(element).data("datepicker");
        //when the view model is updated, update the widget
        if (widget) {
          widget.date = ko.utils.unwrapObservable(valueAccessor());
          widget.setValue(widget.date);
        }
    }};
    
    Answered on November 28, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.