jquery - 我无法显示日期框 - multiDatesPicker

标签 jquery jquery-ui jquery-ui-datepicker jquery-multidatespicker

我花了一周时间尝试让多选日期选择器正常工作。在我尝试过的所有组件中,multiDatesPicker 都符合要求,但我无法让它工作。我什至下载了示例中使用的两个包含的 jquery .js 文件的相同版本。请有人帮助我,我必须在月底之前完成这项工作。

下面是下载的示例代码

<html>
<head>
<!-- includes jquery, jquery ui and multidatespicker scripts -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.multidatespicker.js"></script>

<script>
  $(function() {
    // initiate the multiDatesPicker.
    // Note that you can still use jQuery UI datepicker options (and events and methods too :)
    $('#calendar').multiDatesPicker({
      minDate: +1, // jQuery UI datepicker option
      addDates: ['26/09/2010', '01/12/2010'] // multidatepicker option
    });

    // shows selected dates in an alert message
    $('#show_dates').click(function(e) {
      e.preventDefault();
      var dates = $('#calendar').multiDatesPicker('getDates');
      var dates_in_string = '';
      for(d in dates) dates_in_string+= dates[d]+' ';
      alert(dates_in_string);
    });
  });
</script>
</head>
<body>
  <div id="calendar"></div>
  <button id="show_dates">Show selected dates!</button>
</body>
</html>

我已检查所有三个 .js 文件加载正常。

最佳答案

您遇到的错误是因为 addDates选项取决于本地化:

Adds an array of dates specified in a string, milliseconds or javascript date object format.
NOTE: the string format you should pass to multiDatePicker depends on the localization of datepicker, see this page for more infos on how to configure it.

如果您检查控制台,就会发现 jQuery-UI 脚本引发错误:

Uncaught Invalid date

如果您找不到日期选择器,它会使用 US/ENG 表示法;因此您的日期必须设置为:

$('#calendar').multiDatesPicker({
    minDate: +1, // jQuery UI datepicker option
    addDates: ['09/26/2010', '12/01/2010'] // multidatepicker option
});

工作演示: jsFiddle

如果您想设置不同的日期格式,请使用 dateFormat选项:

$('#calendar').multiDatesPicker({
    minDate: +1, // jQuery UI datepicker option
    dateFormat: "dd/mm/yy",   
    addDates: ['26/09/2010', '01/12/2010'] // multidatepicker option
});

工作演示: jsFiddle

PS:如果可以的话,请更新您的 jQuery 版本

关于jquery - 我无法显示日期框 - multiDatesPicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17784259/

相关文章:

jquery-ui 可排序 : elements dragged behind when using multiple sortables

javascript - Jquery Dialog,添加一行新的样式文本

javascript - jQuery UI 日期选择器 : add 6 months to another datepicker

javascript - Jquery Datepicker 在一个日历中选择多个日期范围

javascript - jQuery UI Datepicker altField .change 函数不起作用?

javascript - 停止弹跳/橡皮筋/滚动效果

javascript - 鼠标悬停时开始幻灯片放映

javascript - undefined variable 的问题

javascript - 使用循环用月份填充数组

javascript - 单击图标时右侧的通知