jQuery UI触发器日期拾取器

jQuery UI trigger datepicker

本文关键字：日期 UI 触发器 jQuery      更新时间：2023-09-26

我有一个span/date元素，如下图

<span class="editableDateTxt">06/10/2014</span>

现在点击这个，我想显示内联可编辑的日期弹出(或jQuery UI日期picker)

当视图被渲染时，我有;

var self = this,                    
$el = $(self.el);
$el.find(".datePicker" ).datepicker();

对于editabledatetext的click，我有;

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

但是日期选择器没有被触发(我看不到UI上的日期选择器)

我做错了什么吗

因为在渲染视图时没有类为datePicker的元素，只有在单击editableDateTxt元素时才会添加。所以你的$el.find(".datePicker" ).datepicker()语句没有任何意义。

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

演示:小提琴

使用这个代码片段。

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

});

工作演示小提琴

  • 不需要手动添加hasDatepicker类。日期picker插件将它添加到元素中。
  • ，动态生成<input>元素;没有在DOM上准备好class="datePicker"的元素。您需要在添加元素后显式调用.datePicker()。

下面是在底部显示的工作演示中工作的代码:

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

Working jsfiddle Demo

相关文章：