javascript - Datepicker和Jinplace

我有Datepicker，并且please check jsfiddle here正常工作。
我也有Jinplace JQuery plugin，并且please check jsfiddle here也能正常工作。
但是我不能让他们一起工作，我的意思是将datepicker放在可编辑的jinplace div please check jsfiddle here中。

码：

$('.editable').jinplace({
});
$.fn.jinplace.editors.birthday = {
    makeField: function(element, data) {
        // Create a label with a checkbox inside it.
        var input = $('<input id="datepicker">');
        return input;
    }
};
$(function() {
        $( "#datepicker" ).datepicker({
            yearRange: "1900:2016",
            dateFormat: "yy-mm-dd",
            changeYear: true
        });
    });

在这种情况下，Jinplace生成如下的HTML代码：

<div class="editable" data-type="birthday">
<form action="javascript:void(0);" style="display: inline;">
<input id="datepicker2">
</form>
</div>

但是，仅在单击div.editable之后，input＃datepicker才会在HTML中显示，并且在单击之前尚未在html代码中列出。像这样：

<div class="editable" data-type="birthday">
</div>

请检查上面的jsfiddle链接以获取更多信息。
我如何让他们一起工作？

最佳答案

这是因为初始化日期选择器时您的输入不存在。您将需要进行datepicker调用，此代码为：

$( "#datepicker" ).datepicker({
        yearRange: "1900:2016",
        dateFormat: "yy-mm-dd",
        changeYear: true
});

一旦使用jinplace将输入呈现到dom上。

就jinplace的文档而言，我找不到一个onload事件，因此，不幸的是，我不确定该如何处理。但是查看源代码和您的示例，这可能会起作用：

$.fn.jinplace.editors.birthday = {
    makeField: function(element, data) {
        // Create a label with a checkbox inside it.
        var input = $('<input id="datepicker">');
        return input;
    },
    activate: function (form, field) {
       field.datepicker({
            yearRange: "1900:2016",
            dateFormat: "yy-mm-dd",
            changeYear: true
       });
       field.focus();
    },
};

我还没有测试。祝好运！