javascript - Is it possible to use contentEditable with jQuery DatePicker? - Stack Overflow

admin管理员组

文章数量:1287179

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

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./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.

• javascript
• jquery
• html
• datepicker
• contenteditable

Share Improve this question Follow asked Apr 17, 2014 at 1:48 Miguel IkeMiguel Ike 48411 gold badge77 silver badges1919 bronze badges 2

• find("[contenteditable=true]") won't work because your DIV has contenteditable='false'. – Barmar Commented Apr 17, 2014 at 1:50
• @Barmar I tried changing the contenteditable into true. It still doesn't work. – Miguel Ike Commented Apr 17, 2014 at 2:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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 e up.
    $(this).parent().find('.datepicker-input').focus();
});

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery./ui/1.11.2/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery./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! ^_^

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>

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

本文标签： javascriptIs it possible to use contentEditable with jQuery DatePickerStack Overflow