123

我已经动态创建了文本框，我希望它们中的每一个都能够在点击时显示一个日历。我正在使用的代码是：

$(".datepicker_recurring_start" ).datepicker();

这只适用于第一个文本框，即使我所有的文本框都有一个名为 datepicker_recurring_start 的类。

非常感谢您的帮助！

4

13 回答 13

290

这是诀窍：

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

演示

$('...selector..').on('..event..', '...another-selector...', ...callback...);语法意味着：为事件（在我们的示例中为'focus' ）
添加一个监听器...selector..（在我们的示例中）。对于匹配选择器（在我们的示例中）的匹配节点的所有后代，应用事件处理程序（在我们的示例中为内联函数）body..event.....another-selector....datepicker_recurring_start...callback...

请参阅http://api.jquery.com/on/，尤其是有关“委托事件”的部分

于 2012-05-03T14:18:26.103 回答
49

对我来说，下面的 jquery 工作：

将“正文”更改为文档

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

感谢斯卡凡德里

注意：确保每个字段的 id 都不同

于 2014-02-12T09:37:12.073 回答
18

skafandri +1的出色回答

这只是更新以检查 hasDatepicker 类。

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});
于 2015-12-17T12:16:06.853 回答
12

确保您的类元素.date-picker还没有hasDatepicker类。如果是这样，即使尝试重新初始化$myDatepicker.datepicker();也会失败！相反，你需要做...

$myDatepicker.removeClass('hasDatepicker').datepicker();
于 2017-01-25T16:12:37.263 回答
6

您需要.datepicker();在动态创建其他文本框元素后再次运行。

我建议在将元素添加到 DOM 的调用的回调方法中这样做。

因此，假设您使用 JQuery Load 方法从源中提取元素并将它们加载到 DOM 中，您将执行以下操作：

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});
于 2012-05-03T14:12:48.100 回答
1

动态元素的新方法是MutationsObserver .. 以下示例使用underscore.js来使用 (_.each) 函数。

MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;    

var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {

    _.each(repeaterWrapper, function (repeaterItem, index) {

        var jq_nodes = $(repeaterItem.addedNodes);

        jq_nodes.each(function () {

            // Date Picker
            $(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
                dateFormat: "dd MM, yy",
                showAnim: "slideDown",
                changeMonth: true,
                numberOfMonths: 1
            });

        });

    });

});

observerjQueryPlugins.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});
于 2016-04-04T16:22:10.473 回答
1

这对我有用（使用 jquery datepicker）：

$('body').on('focus', '.datepicker', function() {
 $(this).removeClass('hasDatepicker').datepicker();
});
于 2019-09-02T20:17:20.440 回答
0

其他解决方案都不适合我。在我的应用程序中，我使用 jquery 将日期范围元素添加到文档中，然后将 datepicker 应用于它们。因此，由于某种原因，没有一个事件解决方案起作用。

这就是最终奏效的方法：

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

希望这对某人有所帮助，因为这让我有点退缩。

于 2016-03-22T17:09:57.643 回答
0

您可以在 javascript 函数中添加类 .datepicker，以便能够动态更改输入类型

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });
于 2017-04-23T12:54:26.927 回答
0

datepicker我已经修改了@skafandri 答案，以避免将构造函数重新应用于所有带.datepicker_recurring_start类的输入。

这是HTML：

<div id="content"></div>
<button id="cmd">add a datepicker</button>

这是JS：

$('#cmd').click(function() {
  var new_datepicker = $('<input type="text">').datepicker();
  $('#content').append('<br>a datepicker ').append(new_datepicker);
});

这是一个工作演示

于 2017-08-31T19:31:00.400 回答
0

这在 JQuery 1.3 上对我有用，并在第一次单击/聚焦时显示

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

这需要您的输入具有“mostrar_calendario”类

Live 适用于 JQuery 1.3+，您需要将其调整为“on”

在此处查看更多关于差异的信息http://api.jquery.com/live/

于 2018-01-11T21:31:37.337 回答
0 
$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});
于 2018-07-11T07:57:50.860 回答
0 
 $('body').on('focus',".my_date_picker", function(){
            $(this).datepicker({
                minDate: new Date(),
            });
        });
于 2021-10-22T10:08:55.223 回答