带有Knockout.js的jQuery UI日期选择器

我正在使用knockout.js在表单中添加和删除字段。到目前为止，它工作正常，但是我需要一个日期选择器选项，所以我使用了jQuery的UI日期选择器。这是可行的，但只适用于第一个日期选择器，其他任何地方都不行。因此，每当我单击“添加”时，我都会得到新字段，但没有日期选择器

我在谷歌上搜索，但没有找到复制字段的解决方案

HTML

<table data-bind='visible: beschikkingen().length > 0'>
            <thead>
                <tr>
                    <th>Beschikkingsdatum</th>
                    <th>Beschikkingsnr</th>
                    <th />
                </tr>
            </thead>
            <tbody data-bind='foreach: beschikkingen'>
                <tr>
                    <td><input name="beschikkingsdatum[]" type="text" class="beschikkingsdatum" value="" data-bind='value: beschikkingsdatum, uniqueName: true' /> </td>
                    <td><input class='required number' data-bind='value: beschikkingsnummer, uniqueName: true' /></td>
                    <td><a href='#' data-bind='click: $root.removebeschikking'>Delete</a></td>
                </tr>
            </tbody>
        </table>

日期选择器

$(window).load(function(){
$('.beschikkingsdatum').datepicker({
    dateFormat: 'dd-mm-yy',
    constrainInput: false
});
});

---

使用自定义绑定处理程序可以解决您的问题：

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).datepicker("getDate"));
        });

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

和HTML格式：

<input data-bind='datepicker: beschikkingsdatum' />

---

这是一个有用的工具：

您是否尝试使用链接问题的绑定：您可能还希望处理

更新

功能，以便视图模型侧的更改将反映在字段中，就像他链接的问题的答案一样Hanks！我要去看看这个。我投了赞成票并接受了。剧本很有效，谢谢你，但现在出现了两个问题：1。验证行为怪异。例如，它仅适用于初始字段。2.当我在字段外单击时，日期选择器保持活动状态。它在IE中不起作用。。这是通过删除console.log来实现的。它没有负面的副作用。

<input data-bind='datepicker: beschikkingsdatum' />