Datepicker & Jinplace

Question

Ich habe Datepicker und es funktioniert gut please check jsfiddle here. Auch ich habe Jinplace JQuery plugin und es funktioniert auch gut please check jsfiddle here. Aber ich kann sie nicht zusammen arbeiten, ich meine datepicker innerhalb editierbare jinplace div please check jsfiddle here setzen.

Code:

$('.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 
     }); 
    }); 

In diesem Fall Jinplace HTML-Code erzeugen wie:

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

Aber Eingang # picker erscheint in HTML nur nach dem Einschalten div.editable klicken und nicht in dem gelistet HTML-Code vor diesem Klick. Gefällt mir:

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

Weitere Informationen finden Sie unter jsfiddle links. Wie kann ich sie zusammen arbeiten lassen?

Answer 1

Dies liegt daran, dass Ihre Eingabe nicht existiert, wenn der Datumsspeicher initialisiert wird. Sie müssen den Datepicker Anruf tätigen, die dieser Code:

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

, sobald der Eingang auf dem dom mit jinplace gemacht wird.

Soweit die Dokumentation von Jinplace geht kann ich kein Onload-Event finden, also bin ich mir nicht sicher, wie ich das machen soll, leider. Aber mit Blick auf den Quellcode und Ihr Beispiel könnte dies funktionieren:

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

Ich habe dies nicht getestet. Viel Glück!