Is it possible to use contentEditable with jQuery DatePicker?

Question

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.

Answer 1

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

Answer 2

None of them worked for me.

I think there must have been a change in the browser specs where hidden type can't have focus.

Anyway, my solution is to hide the input with in a div.

Fyi: Trying to hide the input or wrapping it in a span will not work.

$('.datepicker-input').datepicker({
    minDate: 0,
    onClose: function(dateText, inst) {
        $('.date').text(
            inst.selectedDay       +"-"+
            (inst.selectedMonth+1) +"-"+
            inst.selectedYear);
    }
});
$('.date').click(function() {
    $('.datepicker-input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/start/jquery-ui.css">


<div style="height:0px; overflow:hidden">
    <input class="datepicker-input" type="date"/>
</div>
<span class="date" contentEditable="true">Date?</span>

Enjoy! ^_^

Answer 3

You are not closing the div tag in your html

this

<div class='date' contenteditable='false'>2014-04-05</span>

should be

<div class='date' contenteditable='true'>2014-04-05</div>

Answer 4

Since the rows of the tables are generated dynamically, so you have to create the datepicker dynamically on editing the row. You can use the "focus" or "click" event of the row to bind the datepicker dynamically. Below code demonstrates the same:

        //Add dynamic row when focused on the row
        $(document).on("focus", "#tblMeetingDetails tr", function() {
            if ($(this).find("input[type=hidden].datepicker").attr("id") === undefined) {
                $(this).find("input[type=hidden].datepicker").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd/mm/yy',
                    showOn: "button",
                    buttonImage: "images/calendar-icon.png",
                    buttonImageOnly: true, onSelect: function() { },
                    onClose: function(dateText, inst) {
                        $(this).parent().find("[contenteditable=false]").html(inst.input.text()).blur();
                    }
                });
                $(this).find(".ui-datepicker-trigger").css("visibility", "hidden");
            }
            return false;
        });

and your html for the row would look some what like the below code:

<tr>
    <td>
         <div class="date" contenteditable="false">
         </div>
         <input type="hidden" class="datepicker" />
    </td>
</tr>

you can even use the ".date" class to find the contenteditable field for setting the date in the close event as below : $(this).parent().find(".date").html(inst.input.text()).blur();

Hope this would help :)