[jquery-ui]JQuery 的 UI Datepicker 可禁用星期六和星期日 (和假期) 吗?

标签: jQuery jQuery-UI
发布时间: 2011/5/26 10:22:22
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我可以用 datepicker 选择委任一天。我已经设置只为下个月的日期范围。这工作是正常的。我想从可用选项中排除星期六及星期日。可以这样做吗?如果出现这种情况,如何?

解决方法 1:

beforeShowDay 选项,它需要一个函数调用的每个日期,返回 true,如果允许的日期,则返回 false,如果它不是。从文档:


beforeShowDay

该函数将日期作为参数,并必须返回数组 [0] 等于真/假指示此日期是否可选择和 CSS 类名称 [1] 等于或默认演示文稿。它被称为 datepicker 的每一天之前显示它。

在 datepicker 中显示某些国家的法定假日。

$(".selector").datepicker({ beforeShowDay: nationalDays})   

natDays = [
  [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
  [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
  [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
  [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];

function nationalDays(date) {
    for (i = 0; i < natDays.length; i++) {
      if (date.getMonth() == natDays[i][0] - 1
          && date.getDate() == natDays[i][1]) {
        return [false, natDays[i][2] + '_day'];
      }
    }
  return [true, ''];
}

一个内置函数的存在,称为 noWeekends,使所选内容的周末。

$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })


要将合并这两个,您可以像做 (假设 nationalDays 函数从上面):

$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})   

function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
    if (noWeekend[0]) {
        return nationalDays(date);
    } else {
        return noWeekend;
    }
}

解决方法 2:

如果您不希望出现,只是在周末:

CSS

th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
    display: none;
}

解决方法 3:

这些答案是非常有用的。谢谢。

我下面的贡献将添加一个数组,其中多天可以返回 false (我们正在关闭每个星期二、 星期三和星期四)。我捆绑在一起的具体日期加上年和无周末功能。

如果您希望周末关闭,添加 [周六]、 [周日] 到 closedDays 的数组。

$(document).ready(function(){

    $("#datepicker").datepicker({
        beforeShowDay: nonWorkingDates,
        numberOfMonths: 1,
        minDate: '05/01/09',
        maxDate: '+2M',
        firstDay: 1
    });

    function nonWorkingDates(date){
        var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
        var closedDates = [[7, 29, 2009], [8, 25, 2010]];
        var closedDays = [[Monday], [Tuesday]];
        for (var i = 0; i < closedDays.length; i++) {
            if (day == closedDays[i][0]) {
                return [false];
            }

        }

        for (i = 0; i < closedDates.length; i++) {
            if (date.getMonth() == closedDates[i][0] - 1 &&
            date.getDate() == closedDates[i][1] &&
            date.getFullYear() == closedDates[i][2]) {
                return [false];
            }
        }

        return [true];
    }




});

解决方法 4:

此版本的代码将使从 sql 数据库中获取的假日日期并禁用用户界面 Datepicker 中的指定的日期的 u


$(document).ready(function (){
  var holiDays = (function () {
    var val = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'getdate.php',
        'success': function (data) {
            val = data;
        }
    });
    return val;
    })();
  var natDays = holiDays.split('');

  function nationalDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();

    for (var i = 0; i ‘ natDays.length-1; i++) {
    var myDate = new Date(natDays[i]);
      if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
      {
        return [false];
      }
    }
    return [true];
  }

  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
      if (noWeekend[0]) {
        return nationalDays(date);
      } else {
        return noWeekend;
    }
  }
  $(function() { 
    $("#shipdate").datepicker({
      minDate: 0,
      dateFormat: 'DD, d MM, yy',
      beforeShowDay: noWeekendsOrHolidays,
      showOn: 'button',
      buttonImage: 'images/calendar.gif', 
      buttonImageOnly: true
     });
  });
});

在 sql 中创建的数据库,并把你放在 MM/DD/YYYY 格式为 Varchar 付诸表决的假日日期如下内容的文件 getdate.php


[php]
$sql="SELECT dates FROM holidaydates";
$result = mysql_query($sql);
$chkdate = $_POST['chkdate'];
$str='';
while($row = mysql_fetch_array($result))
{
$str .=$row[0].'';
}
echo $str;
[/php]

快乐的编码!!!!:-)

解决方法 5:

$("#selector").datepicker({ beforeShowDay: highlightDays });

...

var dates = [new Date("1/1/2011"), new Date("1/2/2011")];

function highlightDays(date) {

    for (var i = 0; i < dates.length; i++) {
        if (date - dates[i] == 0) {
            return [true,'', 'TOOLTIP'];
        }
    }
    return [false];

}

解决方法 6:

在此版本、 月、 日、 确定哪天来阻止在日历上。

$(document).ready(function (){
  var d         = new Date();
  var natDays   = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];

  function nationalDays(date) {
    var m = date.getMonth();
    var d = date.getDate();
    var y = date.getFullYear();

    for (i = 0; i < natDays.length; i++) {
      if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
      {
        return [false];
      }
    }
    return [true];
  }
  function noWeekendsOrHolidays(date) {
    var noWeekend = $.datepicker.noWeekends(date);
      if (noWeekend[0]) {
        return nationalDays(date);
      } else {
        return noWeekend;
    }
  }
  $(function() { 
    $(".datepicker").datepicker({

      minDate: new Date(d.getFullYear(), 1 - 1, 1),
      maxDate: new Date(d.getFullYear()+1, 11, 31),

      hideIfNoPrevNext: true,
      beforeShowDay: noWeekendsOrHolidays,
     });
  });
});

解决方法 7:

获取错误,不定义的 natDays。

natDays = [[5,4,'我们'],[8、 17、 'id'],[9、 7、 'br'],[10、 1、 cn],[11、 22、 '磅'],[12,12,'克']] ;

	function nationalDays(date) {
		for (i = 0; i < natDays.length; i++) {
		  if (date.getMonth() == natDays[i][0] - 1
			  && date.getDate() == natDays[i][1]) {
			return [false, natDays[i][2] + '_day'];
		  }
		}
	  return [true, ''];
	}


	$("#datepickerthing").datepicker({ beforeShowDay: noWeekendsOrHolidays})   

	function noWeekendsOrHolidays(date) {
		var noWeekend = $.datepicker.noWeekends(date);
		if (noWeekend[0]) {
			return nationalDays(date);
		} else {
			return noWeekend;
		}
	}

解决方法 8:

嗨,尼欧,

感谢您的代码!!

使您可以排除,例如星期一和星期三,有没有办法吗?或者,它必须是唯一的星期六及星期日吗?

塞巴斯蒂安感谢

官方微信
官方QQ群
31647020