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

Question

我正在寻找一种将 contentEditable 与 jQuery DatePicker 一起使用的方法。我如何在可编辑表格上使用它？？

我在这里找到了一个答案: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

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

为日期选择器使用了一个隐藏的输入，以与可内容编辑的 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();
});