Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input data-bind="datepicker: itemCurrentDate,
datePickeroptions: {
  dateFormat: 'dd/mm/yy',
  changeMonth: true,
  changeYear: true,
  minDate: itemStartDate(),
  maxDate: itemEndDate(),
  datePickerPlaceholder: 'dd/mm/yy' 
  }
  " />
<p>
  theDate: <span data-bind="text: itemCurrentDate"></span>
</p>
<p>
  <input type="button" data-bind="click: resetDate" value="reset date" </p>

</p>

JavaScript

ko.bindingHandlers.datepicker = {
  init: function(element, valueAccessor, allBindingsAccessor) {

    var options = allBindingsAccessor().datePickeroptions || {};


    options.onSelect = function(selected, evnt) {
      var observable = valueAccessor();
      observable(selected);
    };



    $(element).datepicker(options);

    // setting initial value
    $(element).datepicker("setDate", valueAccessor()());


    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $(element).datepicker("destroy");
    });

  },
  //update the control when the view model changes
  update: function(element, valueAccessor, allBindingsAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    $(element).datepicker("setDate", valueAccessor()());
  }
};



function model() {
  var self = this;
  this.itemCurrentDate = ko.observable(new Date(2017, 1, 26));
  this.itemStartDate = ko.observable(new Date(2017, 1, 1));
  this.itemEndDate = ko.observable(new Date(2017, 2, 22));
  this.resetDate = function() {
    self.itemCurrentDate(new Date(2017, 1, 26));
  }
}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);

});