是否可以将 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();
    }
});

但是这种方法对我不起作用。

附加信息：我正在使用引导程序和 jquery-tablesorter。

Answer 1

我通过以下步骤为自己制作了它：

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

Answer 2

它们都不适合我。

我认为隐藏类型无法获得焦点的浏览器规范肯定发生了变化。

无论如何，我的解决方案是将输入隐藏在 div 中。

仅供参考：试图隐藏输入或将其包装在跨度中是行不通的。

$('.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>

享受吧！ ^_^

Answer 3

您没有关闭 html 中的 div 标签

这个

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

应该是

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

Answer 4

由于表格的行是动态生成的，因此您必须在编辑行时动态创建日期选择器。您可以使用行的“焦点”或“单击”事件来动态绑定日期选择器。下面的代码演示了相同的：

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

你的行的 html 看起来有点像下面的代码：

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

您甚至可以使用“.date”类来查找 contenteditable 字段以在关闭事件中设置日期，如下所示： $(this).parent().find(".date").html(inst.input.text()).blur();

希望这会有所帮助:)