Alex Alex - 4 months ago 17
jQuery Question

Datepicker & Jinplace

I have Datepicker and it's working fine please check jsfiddle here.
Also I have Jinplace JQuery plugin and it's also working fine please check jsfiddle here.
But I can not get them to work together, I mean put datepicker inside editable jinplace div please check jsfiddle here.

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 this case Jinplace generate HTML code like:

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


But input#datepicker appears in HTML only after clicking on div.editable and have not been listed in the html code before this click. Like this:

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


Please check jsfiddle links above for more info.
How can I get them to work together?

Answer

This is because your input does not exist when the datepicker is initialised. You will need to make the datepicker call, which is this code:

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

once the input is rendered on the dom using jinplace.

As far as jinplace's documentation goes I cant find an onload event, So I am not sure how to go about this, unfortunately. But looking at the source code and your example, this might work:

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

I haven't tested this. Good luck!