日期选择器的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元素时显示datepicker？

---

尝试过onSelect代码

我更新了以下代码，但在选择上什么都没有发生（我什至尝试在onSelect内添加警报，但不会触发）

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

Answer 1

不知道我是否100％理解您的问题。 但是不仅仅使用$(this).find()解决您的问题。 见下文：

$（document）.on（“ click”，“。editableDateTxt”，function（）{var input = $（''，{'type'：'text'，'class'：'datePicker'，'value'：$ （this）.html（）}）; $（this）.parent（）。append（input）; $（this）.remove（）; input.focus（）; $（this）.find（'。datePicker' ）.datepicker（）。datepicker（'show'）;}）;

\n

我重新阅读了您的代码。 如何存储对父项的引用并使用该引用进行搜索。

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

Answer 2

代替

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

尝试：

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