Datepicker＆Jinplace

Question

我有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並沒有在上市後出現在HTML此點擊之前的HTML代碼。像這樣：

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

請檢查上面的jsfiddle鏈接瞭解更多信息。 我如何讓他們一起工作？

Answer 1

這是因爲您的輸入在日期選擇器初始化時不存在。你需要做的日期選擇器調用，這是該代碼：

$("#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(); 
    }, 
}; 

我還沒有測試過這個。祝你好運！