Question

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

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

哪个只能在第一个文本框上工作，即使我的所有文本框都有一个名为datepicker_recurring_start的类。

非常感谢您的帮助！

Answer 1

这是诀窍：

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

DEMO

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

请参阅http://api.jquery.com/on/，尤其是有关“委派活动”的部分

Answer 2

对于我来说，jquery工作：

将“正文”改为文件

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

感谢skafandri

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

Answer 3

skafandri +1

的优秀答案

这只是更新以检查hasDatepicker类。

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

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

});

Answer 4

确保您的import {Component, OnInit} from '@angular/core'; import { ThesesService } from '../shared/theses/theses.service'; import { Thesis } from '../shared/theses/thesis.model'; import {FormBuilder, FormGroup} from "@angular/forms"; /** * This class represents the lazy loaded ExaminerOverviewComponent. */ @Component({ moduleId: module.id, selector: 'examiner-create-thesis', templateUrl: 'examiner-create-thesis.component.html', styleUrls: ['examiner-create-thesis.component.css'] }) export class ExaminerCreateThesisComponent implements OnInit { formData: FormGroup; ngOnInit() { this.formData = this.fb.group({ "thesisType": "bachelor", "externalInternal": "internal", "titleGerman": "testg", "titleEnglish": "teste" }); } constructor(private thesesService:ThesesService, private fb: FormBuilder) { }; submit(formVal: any) { console.log("SUBMIT", formVal); } }类元素没有.date-picker类。如果是这样，即使尝试使用hasDatepicker重新初始化也会失败！相反，你需要做...

$myDatepicker.datepicker();

Answer 5

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

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

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

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});

Answer 6

动态元素的新方法是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
});

Answer 7

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

这是最终奏效的：

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

希望这对某人有所帮助，因为这让我有所回首。

Answer 8

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

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });

Answer 9

我修改了@skafandri的答案，以避免将datepicker构造函数重新应用于.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);
});

这里是working demo

Answer 10

这对我在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/

Answer 11

print (df)
   No       Item      Desc
0   1        AWS    Lambda
1   2        AWS     Polly
2   3  Microsoft     Azure
3   4  Microsoft     Excel
4   5     Google  BigQuery
5   6        AWS  Database
6   7        AWS  Big Data
7   8        AWS     NoSQL

Answer 12

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

$('body').on('focus', '.datepicker', function() {
 $(this).removeClass('hasDatepicker').datepicker();
});

将datepicker（）放在动态创建的元素上 - JQuery / JQueryUI

12 个答案: