日期选择器的 jQuery 内联编辑

Question

在我的页面上，有多个地方的日期字段呈现如下； 因此，某些日期始终显示在可编辑的文本框中，而其他日期则显示为标签（然后进行内联编辑）

<div class="editableDateTxt" title="06/04/2014">06/04/2011</div>
<input type="text" value="" placeholder="mm/dd/yyyy" name="date1" id="date1" class="datePicker">
<input type="text" value="" placeholder="mm/dd/yyyy" name="date2" id="date2" class="datePicker">

<div class="editableDateTxt" title="06/04/2014">06/04/2012</div>
<input type="text" value="" placeholder="mm/dd/yyyy" name="date3" id="date3" class="datePicker">

<div class="editableDateTxt" title="06/04/2014">06/04/2013</div>
<input type="text" value="" placeholder="mm/dd/yyyy" name="date4" id="date4" class="datePicker">

现在我需要实现内联编辑...即单击标签时，我想显示 jQuery UI 日期选择器，而在模糊时，我想隐藏...

所以我使用下面的代码；

$(document).on("click",".editableDateTxt", function () {
                        var input = $('<input />', {'type': 'text', 'class':'datePicker', 'value': $(this).html()});
                        $(this).parent().append(input);
                        $(this).remove();
                        input.focus();
                        $('.datePicker').datepicker().datepicker('show');
                });

                $(document).on("blur",".datePicker", function () {
                        $(this).parent().append($("<div class='editableDateTxt'/>").html($(this).val()));
                        $(this).remove();
                });

但是，这条线似乎有问题；

$('.datePicker').datepicker().datepicker('show');

因为有多个元素具有类 datePicker...如何确保仅在单击具有类“editableDateTxt”的 div 元素时才显示日期选择器？

---

试过选择代码

我更新了如下代码，但 select 没有任何反应（我什至尝试在 onSelect 中添加警报，但它没有触发）

$(parent).find('.datePicker').datepicker().datepicker({
    onSelect: function(date) {
        parent.append($("<div class='editableDateTxt'/>").html(date));
        $(this).remove();
    }
}).datepicker('show');

Answer 1

代替

$('.datePicker').datepicker().datepicker('show'); 

试试：

input.datepicker().datepicker('show');

Answer 2

不确定我是否 100% 理解您的问题。但不只是使用$(this).find() 解决您的问题。见下文：

$(document).on("click",".editableDateTxt", function () { var input = $('', {'type': 'text', 'class':'datePicker', 'value': $(this).html()}); $(this).parent().append(input); $(this).remove(); 输入.焦点（）； $(this).find('.datePicker').datepicker().datepicker('show'); });

我重新阅读了您的代码。存储对父级的引用并使用它进行搜索怎么样？

$(document).on("click",".editableDateTxt", function () {
    var input = $('<input />', {'type': 'text', 'class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();
    input.focus();
    $(parent).find('.datePicker').datepicker().datepicker('show');
});

或者所有元素共享同一个父元素。有点不确定，因为您的 JS 似乎建议独特的父元素，但您的 HTML 没有。不过，您可能没有包含所有 HTML。

当然，只使用输入变量也可以：

input.datepicker().datepicker('show');

一开始没注意到。

---

回应您关于关闭日期选择器并仅显示所选日期的评论。最好的方法是在日期选择器中使用onSelect 选项。像这样：

parent.find('.datePicker').datepicker({
    onSelect: function(date) {
        parent.append($("<div class='editableDateTxt'/>").html(date));
        $(this).remove();
    }
}).datepicker('show');

查看这个工作 jsfiddle：http://jsfiddle.net/6pptH/

---

所以你的整个 JS 变成了：

$(document).on("click",".editableDateTxt", function () {
    var input = $('<input />', {'type': 'text', 'class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();
    input.focus();
    parent.find('.datePicker').datepicker({
        onSelect: function(date) {
            parent.append($("<div class='editableDateTxt'/>").html(date));
            $(this).remove();
        }
    }).datepicker('show');
});