jqueryknockout.jsjquerydatetimepicker

How to store Date Time Picker Entries in observable array?


I am sharing a link of what I want to do (the last one in the link i.e, date time)

https://rsuite.github.io/multi-date-picker/

After doing this I want to store these entries inside observable array

Note: I want to do this everything inside simple notepad and with jQuery date time picker

function Friend() {
  $(document).ready(function() {
      $("#datetime").datetimepicker();
  });
  var self = this;
  self.dates = ko.observable();
  self.removeFriend=function() {
    obj.friends.remove(self);
  }
}
var obj = {
  friends:ko.observableArray([new Friend()])
};
obj.addFriend=function() {
  obj.friends.push(new Friend());
}
ko.applyBindings(obj);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
<h1>Hello JS</h1>
<ul data-bind="foreach:friends">
  <li>
    <input readonly type="text" id="datetime" data-bind="value:dates" />
    <button data-bind="click: removeFriend">Remove Employee</button>
  </li>
</ul>
<button data-bind="click: addFriend">Add Employee</button>

I am very new at this.


Solution

  • There are few problems with your code:

    1. The major problem is that you initialize your input directly with jquery, while you should delegate this responsibility to a custom binding. Luckily, other people already did this job for you (see here and here. in the code below I use the code given there).

    2. Also, every newly added employee has the same id value, so you should give a unique id to each one, or just get rid of it - which is what I did below.

    3. removeFriend should be defined in the parent object.

    Also, note that the datepicker used in the website you linked to is not the library called jquery-datetimepicker, which you refer to throughout your question, and is thus what I refer to.

    Here's the working (reformatted) code:

    $(document).ready(function() {
      initCustomBinding();
      initFriends();
    });
    function initFriends() {
      var obj = {
        friends: ko.observableArray([new Friend()]),
        addFriend: function() {
          obj.friends.push(new Friend());
        },
        removeFriend: function($data) {
          obj.friends.remove($data);
        }
      };
      ko.applyBindings(obj);
    }
    function Friend() {
      var self = this;
      self.dates = ko.observable();
    }
    function initCustomBinding() {
      ko.bindingHandlers.datetimepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var $el = $(element);
            //initialize datepicker with some optional options
            var options = allBindingsAccessor().datepickerOptions || {};
            $el.datetimepicker(options);
    
            //handle the field changing
            ko.utils.registerEventHandler(element, "change", function () {
                var observable = valueAccessor();
                var $el = $(element);
                observable($el.datetimepicker("getDate").Value);
            });
    
            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $el.datetimepicker("destroy");
            });
    
        },
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                $el = $(element),
                current = new Date($el.val());
    
            if (value - current !== 0) {
                $el.datetimepicker("setDate", value);
            }
        }
      };
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script src="
    https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
    <h1>Hello JS</h1>
    <ul data-bind="foreach:friends">
      <li>
        <input readonly type="text" data-bind="datetimepicker:dates" />
        <button data-bind="click: $root.removeFriend">Remove Employee</button>
      </li>
    </ul>
    <button data-bind="click: addFriend">Add Employee</button>