JQuery Datepicker 无法正常工作

Posted 2023-05-07

【中文标题】JQuery Datepicker 无法正常工作

【英文标题】：JQuery Datepicker not working correctly

【发布时间】：2016-05-20 14:26:39

【问题描述】：

解释

我有下拉列表，在选择任何值后它添加了 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">Ps-s-r</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测试它

【参考方案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 = 
    ....

【讨论】：

谢谢你的回答，我已经定义了optionTest，我已经更新了我的问题。

是的，你定义了它。但它在$(function() 内部，使其在该功能块之外不可见。这就是为什么它不起作用

感谢您尝试提供帮助，但仍然无法正常工作。我也创建了小提琴：plnkr.co/edit/wLcMs9Vumk5mIKRhvlCi?p=preview

是的，找到了问题。一旦下拉菜单可见，就应该执行事件处理程序（如$( "#from-1" ).datepic...）。现在它们在加载时执行

我怎样才能做到这一点？我是否应该多次定义需要添加Datepicker 的函数？我的意思是id="from-1" 应该有功能的字段：$(function() $( "#from-1" ).datepicker( 对于id="from-2 我应该有功能的字段：$(function() $( "#from-2" ).datepicker( 等等？我不能有类似的东西：$(function() $( "#datepicker" ).datepicker( 并将它用于type=date 的所有字段吗？