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.

`find("[contenteditable=true]")` won't work because your DIV has `contenteditable='false'`. — Barmar, Apr 17 '14 at 01:50
@Barmar I tried changing the contenteditable into true. It still doesn't work. — Miguel Ike, Apr 17 '14 at 02:44

score 6 · Accepted Answer · answered Nov 04 '14 at 09:07

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

I had some trouble with the focus() not spawning the dialog, so I used .datepicker("show") instead, which worked like a charm — tomzooi, Oct 11 '15 at 11:19
Might help changing your input name to something other than that the class being used for your div... — Andrew, Dec 20 '17 at 23:52
I wrote a better solution to this question, **[you can view it here](https://stackoverflow.com/a/48597401/6099347)**. — Aniket Sahrawat, Feb 03 '18 at 16:38

score 2 · Answer 2 · answered Feb 23 '15 at 22:33

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! ^_^

score 1 · Answer 3 · answered Apr 17 '14 at 04:53

1

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>

answered Apr 17 '14 at 04:53

NoGray

1,149
7
9

score 1 · Answer 4 · answered Aug 12 '14 at 10:59

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 :)

Is it possible to use contentEditable with jQuery DatePicker?

4 Answers4

Linked