javascript - JQuery 日期选择器无法正常工作

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 = {
    ....