jquery - 如何将日期时间选择器条目存储在可观察数组中?
问题描述
我正在分享我想做的事情的链接(链接中的最后一个,即日期时间)
https://rsuite.github.io/multi-date-picker/
这样做之后,我想将这些条目存储在可观察数组中
注意:我想在简单的记事本和 jQuery 日期时间选择器中完成这一切
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>
我对此很陌生。
解决方案
您的代码几乎没有问题:
主要问题是您
input
直接使用 jquery 初始化,而您应该将此责任委托给自定义绑定。幸运的是,其他人已经为您完成了这项工作(请参见此处和此处。在下面的代码中,我使用那里给出的代码)。此外,每个新添加的员工都具有相同的
id
值,因此您应该为每个人提供一个唯一的 id,或者干脆去掉它——这就是我在下面所做的。removeFriend
应该在父对象中定义。
另外,请注意,您链接到的网站jquery-datetimepicker
中使用的日期选择器不是您在整个问题中引用的名为 的库,因此是我所指的。
这是工作(重新格式化)代码:
$(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>
推荐阅读
- javascript - jQuery 插件正在使用 jQuery v3.5.1 的已弃用功能
- azure-pipelines - 使用管道构建时 jcenter 失败(504 超时)
- postgresql - 如何将 postgres 命令发送到 AWS Run Command?
- powershell - 我有一个 powerscript 可以很好地与 Outlook 一起发送电子邮件。如何更改它以从我的 gmail 帐户发送电子邮件
- python-3.x - 如何在listview django中结合图像和视频嵌入
- python - 如何在 django 中按日期从 MySQL 获取数据?
- css - 同一断点的多个媒体查询
- sql - 将时间戳转换为毫秒
- codenameone - 如何在部署中捕获 Codenameone 错误,黑屏
- node.js - 使用 proxyquire 模拟导入有效,但存根函数显示为未调用