Question

释

我有下拉列表，选择任何值后添加2个输入字段（日期类型）。我可以添加多个字段，如下图所示：

问题是JQuery Datepicker在这种情况下不起作用（不是弹出日历）。

我包括Datepicker库：

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

用法：

$(function() {
    $( "#from" ).datepicker({
      monthNamesShort: $.datepicker.regional["en"].monthNames,
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd'
  });
});

如果我在下面使用它，它可以正常工作：

<div class="test">
<label for="from">Date Applied</label>
<input id="from" type="date" name="to" class="field-style field-split25-4 align-left" placeholder="Date To" />
</div>

如果我试图动态添加字段，就像这样，它不起作用（不弹出日历）：

  $.fn.optionTest.isArray = function(val) {
    return Object.prototype.toString.call(val) === '[object Array]';
  };
  $.fn.optionTest.defaults = {
    clearOnChange: false,
    actionId: '#action',
    indexOptions: {
    class: 'div-format-test'
    },
    rowOptions: {
      id: 'option',
      class: 'div-format',
      tag: 'tr'   
    },
    fromOptions: {
      id: 'from',
      name: 'from',
      type: 'date',
      placeholder: 'Date of Issue',
      size: 20,
      class: 'div-format-30'
    },
    toOptions: {
      id: 'to',
      name: 'to',
      type: 'date',
      placeholder: 'Date of Expire',
      size: 20,
      class: 'div-format-30'
    },
    labelOptions: {
      class: 'test-label'
    },
    removeLinkOptions: {
      class: 'removeRow',
      href: 'javascript:;'
    }
  };

$(document).ready(function() {
  $('select').optionTest({
    actionId: '#action2',
    clearOnChange: false
  });
});

// body
<div class="header">
  <select id='options' class="field-style div-format align-left">
    <option selected disabled value="0">Select certificates</option>
    <option value="1">PSSR</option>
    <option value="2">Adv. F.F.</option>
    <option value="3">Survival</option>
    <option value="4">HAZMAT</option>
    <option value="5">First Aid</option>
    <option value="6">Med. Care</option>
    <option value="7">SSO</option>
    <option value="8">GMDSS</option>
    <option value="9">Rad. Obs.</option>
    <option value="10">ARPA</option>
    <option value="11">ECDIS</option>
    <option value="12">BT&RM</option>
    <option value="13">Oil. Tank.</option>
    <option value="14">Ch. Tank.</option>
    <option value="15">LPG</option>
    <option value="16">LNG</option> 
  </select>  
</div>
<div id="action2"></div>

我注意到浏览器检查员发现了奇怪的事情，如果我添加多个输入字段它会为所有字段生成不同的ID：from-1，from-2，from-3等等上。

所以我试图改变Datepicker的功能，如

$( "#from-1" ).datepicker({
...

但是同样的问题 - 没有用。你有什么想法吗？

更新

我已经定义了optionTest，如下所示：

$(function() {
  $.fn.optionTest = function(opts) {
    var option = $.extend({}, $.fn.optionTest.defaults, opts);


    $(this).change(function() {
            option.holderObject=$(this);

      if (option.clearOnChange) {
        $(option.actionId).empty();
      }
      var val = $(this).val();
      if ($.fn.optionTest.isArray(val)) {
        $.fn.optionTest.parseArray(val, option);
      } else {
                var label =$(this).children("option:selected").eq(0).text();
        $.fn.optionTest.parseContent(val, option, label);
      }

      $('.' + option.removeLinkOptions.class).click(function(event) {
        $.fn.optionTest.removeRow(this, option);
        event.preventDefault();

      });
      return this;
    });
  };
...

您可以在FIDDLE

进行测试

Answer 1

Fiddle here

在定义其他自定义函数之前，将optionTest定义为$.fn.optionTest=function(){};，如下所示。这将解决问题

  $.fn.optionTest=function(){};

  $.fn.optionTest.isArray = function(val) {
    return Object.prototype.toString.call(val) === '[object Array]';
  };
  $.fn.optionTest.defaults = {
    ....

JQuery Datepicker无法正常工作

1 个答案: