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.
There are few problems with your code:
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).
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.
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>