是否可以将contentEditable与jQuery DatePicker一起使用？

Question

我正在寻找一种方法来使用带有jQuery DatePicker的contentEditable.我怎样才能在可编辑的表格上使用它？

我在这里找到了一个答案:http://www.sencha.com/forum/showthread.php？ 229598-Looking- to-enable- contenteditable-true- for- custom-input- type

这就是我尝试使用上面链接中给出的示例.

HTML代码:

<td>
    <div class='date' contenteditable='false'>2014-04-05</span>
    <input type='hidden' class='datepicker' />
</td>

Javascript代码:

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

但这种方法对我不起作用.

附加信息:我正在使用bootstrap和jquery-tablesorter.

Answer 1

我通过以下步骤为自己制作:

使用datepicker的隐藏输入,与contenteditable div一起使用:

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

使用以下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();
});