Question

我正在寻找一种方法来使用带有jQuery DatePicker的contentEditable。如何在可编辑的表上使用它？

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

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

HTML code：

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

Answer 2

他们都不适合我。

我认为隐藏类型无法集中注意力的浏览器规范必定会发生变化。

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

Fyi：试图隐藏输入或将其包裹在范围内将无效。

＆＃13;

$('.datepicker-input').datepicker({
    minDate: 0,
    onClose: function(dateText, inst) {
        $('.date').text(
            inst.selectedDay       +"-"+
            (inst.selectedMonth+1) +"-"+
            inst.selectedYear);
    }
});
$('.date').click(function() {
    $('.datepicker-input').focus();
});

＆＃13;

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

＆＃13;

享受！ ^ _ ^

Answer 3

您没有关闭html中的div标签

此

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

应该是

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

Answer 4

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

        //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”类找到在close事件中设置日期的contenteditable字段，如下所示： $（本）.parent（）发现（ “日期”。）的HTML（inst.input.text（））模糊（）; ...

希望这会有所帮助：）

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

4 个答案: