jQuery Datepicker禁用日期

时间:2012-06-01 10:29:56

标签: jquery datepicker

我正在使用Keith Wood的伟大jQuery Datepicker plugin

我在管理系统中使用datepicker来显示管理员为场地预订的日期。

我有一个日期列表(从数据库中提取),用于在datepicker上显示这些预订日期。但是,如果管理员想要更改任何这些日期并使日期可用,则日历不允许我“取消选择”已选择的日期。

这是代码的缩小版本,但问题仍然存在,此代码显示了jun 26&的日期。 6月27日预订,但我不能选择他们“取消预订”他们。

 <script type="text/javascript">

    var bookedDaysList = [[6, 26], [6, 27]];

                function bookedDays(date, inMonth) { 
                    if (inMonth) {
                        for (i = 0; i < bookedDaysList.length; i++) {
                            if (date.getMonth() + 1 == bookedDaysList[i][0] &&
                                    date.getDate() == bookedDaysList[i][1]) {
                                return {dateClass: 'datepick-selected',selectable: true}; 
                            } 
                        } 
                    } 
                    return {}; 
                }

                /* create datepicker */

                jQuery(document).ready(function () {

                    jQuery('#show-dates').datepick({
                        dateFormat: 'dd-mm-yy',
                        altFormat: '[m,d]',
                        onDate: bookedDays,
                        buttonImage: 'css/images/datepicker.gif',
                        buttonImageOnly: true,
                        monthsToShow: 3,
                        multiSelect: 999,
                        showOn: 'both'
                    });
                });


</script>

2 个答案:

答案 0 :(得分:2)

这很简单。)

  <div class="date-picker" data-deselect="2013-12-23,2013-12-19,2013-12-31,2013-12-29,2014-01-18"></div>


  $(".date-picker").datepick({
    onDate: function(date) {
      date_str = $.datepick.formatDate('yyyy-mm-dd', date);
      dates_unselect = $(this).data("deselect").split(",");
      return {selectable: ($.inArray(date_str, dates_unselect) === -1)};
    }
  });

答案 1 :(得分:0)

经过一番研究,我发现这个日期选择器可以完成这项工作......

http://multidatespickr.sourceforge.net/

我很惊讶Keith Wood插件不适合这个或者我错过了吗?