jQuery内联编辑日期选择器

jQuery Inline Editing for date picker

本文关键字：日期 选择器 编辑 jQuery      更新时间：2023-09-26

在我的页面上，有多个地方的日期字段呈现如下;因此，有些日期总是显示在可编辑的文本框中，而其他日期则作为标签(然后内联编辑)

<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…我如何确保日期选择器只显示在div元素与类"editabledatetext"被单击?

尝试onSelect代码

我更新了代码如下，但没有发生选择(我甚至尝试在onSelect内添加警报，但它不触发)

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

代替

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

试题:

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

不确定我是否100%理解你的问题。但仅仅使用$(this).find()不能解决你的问题。见下文:

<罢工>$(文档)。("点击"、"。editabledatetext "， function () {var输入 = $('', {' 类型":"文本"、"类":"datePicker"、"价值":$ (). html ()});美元(这).parent () .append(输入);(美元).remove ();input.focus ();(美元);(.datePicker) .datePicker () .datePicker(显示);});

罢工

我重读了你的代码。存储对父节点的引用并使用它来搜索呢? 
$(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');
});
相关文章：