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> 

Но вход # DatePicker появляется в HTML только после нажатия на div.editable и не были перечислены в html до этого щелчка. Например:

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

Для получения дополнительной информации, пожалуйста, проверьте ссылки jsfiddle выше. Как я могу заставить их работать вместе?

Answer 1

Это связано с тем, что ваш вход не существует, когда инициализируется datepicker. Вам нужно будет сделать Datepicker вызов, который этот код:

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

когда вход визуализируется на йот используя jinplace.

Что касается документации 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(); 
    }, 
}; 

Я не тестировал это. Удачи!