Question

我需要动态创建jquery日期选择器。但我试图创建它，但我动态创建日期选择器时无法触发图标。以下是我的代码。请你帮我解决。

Jquery的：

$('.FixedDates').datepicker({
              showOn: "button",
              buttonImage: "images/HM-Cal-Icon.png",
              buttonImageOnly: true
          });
          $('.AddDate').click(function () {
              $('.HMDatePicker').append('<br><input type="text" class="FixedDates">');
          });

          $('body').on('click', ".FixedDates", function () {
              $(this).datepicker({
                  showOn: "button",
                  buttonImage: "images/HM-Cal-Icon.png",
                  buttonImageOnly: true
              });

HTML：

<div class="HMDatePicker margin-top">
                    <input type="text" class="FixedDates">
                     <span class="padding-right"> </span>
                     <span class="colorsymbolBluesmall AddDate">&#xe109;</span>
                     <span class="blue pointer AddDate" tabindex="0">add another date</span>
                </div>

Answer 1

Working Fiddle

使用此，

$('.AddDate').click(function () {
    $('.HMDatePicker').append('<br><input type="text" class="FixedDates">');
    $('.FixedDates').datepicker({
              showOn: "button",
              buttonImage: "images/HM-Cal-Icon.png",
              buttonImageOnly: true
    });
});

删除以下代码。

$('body').on('click', ".FixedDates", function () {
    $(this).datepicker({
              showOn: "button",
              buttonImage: "images/HM-Cal-Icon.png",
              buttonImageOnly: true
     });

});

Answer 2

$(function ()
 {
       $("#createDate").datepicker({
                dateFormat: "mm/dd/yy",
                changeMonth: true,
                changeYear: true,
                maxDate: currentDate,
                //  maxDate: currentDate,
                yearRange: "-90:+10"
       });
});

Answer 3

使用以下方法从bootstrap创建分组图标：

 $(".datepicker").not(".hasDatepicker")
 .wrap('<div class="input-group">')
 .datepicker({
     changeMonth: true,
     changeYear: true,
     dateFormat: "mm/dd/yy",
     showOn: "button"
 })
 .next("button").button({
     icons: { primary: "glyphicon-normal glyphicon glyphicon-calendar" },
     label: " ",
     text: false
 })
 .removeClass()
 .addClass("no-background")
 .wrap('<span class="input-group-addon">')
 .find('.ui-button-text')
 .css({
     'visibility': 'hidden',
     'display': 'inline'
 }).on('change', function () {
     $('.datepicker').hide();
 });

将datepicker（）与日历图标放在动态创建的元素上 - JQuery / JQueryUI

3 个答案:

Working Fiddle