Is it possible to use contentEditable with jQuery DatePicker?

contenteditable, datepicker, html, javascript, jquery

Solution

I made it for myself with the following steps:

Used a hidden input for the datepicker, to work along with the contenteditable div:

<div class="holder">
    <input name="date" class="datepicker-input" type="hidden" />
    <div class="date" contentEditable="true"></div>
</div>

With the following jQuery:

// Binds the hidden input to be used as datepicker.
$('.datepicker-input').datepicker({
    dateFormat: 'dd-mm-yy',
    onClose: function(dateText, inst) {
        // When the date is selected, copy the value in the content editable div.
        // If you don't need to do anything on the blur or focus event of the content editable div, you don't need to trigger them as I do in the line below.
        $(this).parent().find('.date').focus().html(dateText).blur();
    }
});
// Shows the datepicker when clicking on the content editable div
$('.date').click(function() {
    // Triggering the focus event of the hidden input, the datepicker will come up.
    $(this).parent().find('.datepicker-input').focus();
});

Problem

I'm looking for a way to use contentEditable with jQuery DatePicker. How can I use it on editable tables?? I found one answer here : http://www.sencha.com/forum/showthread.php?229598-Looking-to-enable-contenteditable-true-for-custom-input-type And this is what I tried to do using the example given on the link above. HTML code: ``` <td> <div class='date' contenteditable='false'>2014-04-05</span> <input type='hidden' class='datepicker' /> </td> ``` Javascript code: ``` $(".datepicker").datepicker({ dateFormat: 'yyyy-mm-dd', showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true, onClose: function(dateText, inst) { $(this).parent().find("[contenteditable=true]").focus().html(dateText).blur(); } }); ``` But this method doesn't work for me. Additional Info: I'm using bootstrap and jquery-tablesorter.

Original source