jQuery UI触发日期选择器

Question

我有一个跨度/日期元素如下

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

现在单击此按钮，我要显示内联可编辑日期弹出窗口（或jQuery UI datepicker）

因此，当渲染视图时，我拥有了；

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

然后单击editableDateTxt，

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

但是Datepicker未被触发（我无法在UI上看到日期选择器）

难道我做错了什么 ？

Answer 1

因为在渲染视图时，没有类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();
});

演示： 小提琴

Answer 2

使用此代码段。

$(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 。 Datepicker插件将其添加到元素中。
• 并且<input>元素是动态生成的； 在DOM上没有带有class="datePicker"元素。 追加元素后，需要显式调用.datePicker() 。

Answer 3

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

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

工作jsfiddle演示