Question

我需要一个jQuery日历插件，我可以在其中指定可选择的日期，但仍然会在日历上显示整个月份。

Answer 1

使用Datepicker，只需在检查日期的事件中添加处理程序。

示例（原件来自this forum post）

<script type="text/javascript">

      $(document).ready(function(){
        $("#datepicker").datepicker({
              dateFormat: 'dd/mm/yyyy',
              beforeShowDay:  disableDays
        });
      });

      var disabledDays = ["12/10/2009", "13/10/2009", "15/11/2009"];

      function disableDays(date) {

              var sDate = date.getDate().toString() + "/" + 
                          (date.getMonth()+1).toString() + "/" + 
                          date.getFullYear().toString();
              if ($.inArray(sDate, disabledDays ) != -1) return [true];
              else return [false];

      }

  </script>

来自here

的

另一个示例（更快？）

$(function() {
    // format: specialDays.year.month.day
    var specialDays = {
          '2009': {
        '1': {'1': {tooltip: "New Year's Day", className: "holiday"}},
        '4': {
           '10': {tooltip: "Good Friday", className: "holiday"}, 
           '13': {tooltip: "Easter Monday", className: "holiday"}
            },
        '5': {
            '4': {tooltip: "Early May Bank Holiday", className: "holiday"},
            '15': {tooltip: "Spring Bank Holiday", className: "holiday"}
            },
        '8': {'31': {tooltip: "Summer Bank Holiday", className: "holiday"}},
        '12': {
            '25': {tooltip: "Christmas Day", className: "holiday"},
            '28': {tooltip: "Boxing Day", className: "holiday"}
            }
        }
    }; 

    $('#datepicker').datepicker({beforeShowDay: function(date) {
               var d = date.getDate(),
           m = date.getMonth()+1,
           y = date.getFullYear();

        if (specialDays[y] && specialDays[y][m] && specialDays[y][m][d]) {
           var s = specialDays[y][m][d];
             return [true, s.className, s.tooltip]; // selectable
        }
        return [false,'']; // non-selectable
    }});
});

Answer 2

jCal非常出色并且可以自定义。

jCal homepage

这将显示1个月，并且只允许选择指定的3天。

        $(document).ready(function () {
        $('#calOne').jCal({
            day: new Date((new Date()).setMonth(7)),
            days: 1,
            showMonths: 1,
            dayOffset: 0,
            dow:     ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
            dCheck:         function (day) { return $.inArray(
            [(day.getMonth() + 1), day.getDate(), day.getFullYear()].join('/'),
            ['8/21/2009', '8/28/2009', '8/29/2009']) != -1},
            callback: function (day, days) {
                    $('#calResult').val(day.getFullYear() + '-' + ( day.getMonth() + 1 ) + '-' + day.getDate());
                    return true;
                }
            });
  $('#calOne').disableSelection();
    });

Answer 3

看看yacal。它重量轻，允许您直接选择日期范围（最小/最大日期）。

$('.calendar').yacal({
  minDate: '2009/11/10',
  maxDate: '2009/11/20',
})

需要一个jQuery日历插件，具体日期

3 个答案: