[英]How to Disable the very next weekends in jQuery UI Datepicker?
In an order page I want to implement a calendar, in which, if the user is ordering on friday after 10am, then block the following saturday and sunday in delivery date calendar. 在订单页面中,我想实现一个日历,其中,如果用户在周五上午10点之后订购,则在下周六和周日交货日期日历中阻止。 Here is a sample code I am trying, but not working as intended.
这是我正在尝试的示例代码,但没有按预期工作。
beforeShowDay: function(date) {
var day = dt.getDay();
var hour = dt.getHours();
if (day == 4) {
// i think, here i want to put the code to disable days
}
}
If I use something like this 如果我使用这样的东西
beforeShowDay: function(date) {
var day = date.getDay();
var dt = new Date();
var hour = dt.getHours();
return [(day != 5 && day != 6)];
}
I am able to disable Sat and Sun days, but this will disable all the Sat and Sun days. 我可以禁用周六和周日,但这将禁用所有周六和周日。 I wnat to disable only the very next Sat n Sun days to be disabled.
我只想在下一个星期六的太阳日禁用残疾人。 Also I can get current Hour in var hour, So where should I use the condition to check if the hour is greater than 10am, I am using something like this but not working
此外,我可以在var小时内获得当前小时,那么我应该在哪里使用条件来检查小时是否大于上午10点,我使用的是这样的东西但是没有工作
beforeShowDay: function(date) {
var dt = new Date();
var hour = dt.getHours();
var day = date.getDay();
if (day == 4 && hour >= 10) {
return [(day != 5 && day != 6)];
}
}
Inside the beforeShowDay
function, check the current date to see if it is a Friday and after 10am. 在
beforeShowDay
函数内,检查当前日期以查看它是星期五还是上午10点之后。 If this is true then you also need to check if the date
passed as argument is the next Saturday or Sunday: 如果这是真的,那么你还需要检查作为参数传递的
date
是下周六还是周日:
$(function() { $("#datepicker").datepicker({ beforeShowDay: function(date) { // date (Friday March 13 2015 10:00 AM) is hardcoded for testing var now = new Date(2015, 3 - 1, 13, 10, 0, 0, 0); if (now.getDay() === 5 && now.getHours() >= 10) { var now_plus_1 = new Date(now.getTime()); now_plus_1.setHours(0, 0, 0, 0); now_plus_1.setDate(now_plus_1.getDate() + 1); var now_plus_2 = new Date(now.getTime()); now_plus_2.setHours(0, 0, 0, 0); now_plus_2.setDate(now_plus_2.getDate() + 2); return [date.getTime() !== now_plus_1.getTime() && date.getTime() !== now_plus_2.getTime(), ""]; } return [true, ""]; } }); });
@import url("//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/ui-darkness/jquery-ui.min.css"); body { font-size: smaller; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <input id="datepicker">
$('#datepicker').datepicker({
beforeShowDay: function(date){
var dt = new Date(),
day = dt.getDay(),
hour = dt.getHours(),
twoDaysFrmNow = new Date().setDate(dt.getDate() + 2);
return [!(day == 5 && hour >= 10 && date <= twoDaysFrmNow && date > dt)];
}
});
beforeShowDayType: Function( Date date )
beforeShowDayType:Function(Date date)
Default: null
默认值:null
A function that takes a date as a parameter and must return an array with:
一个以日期作为参数的函数,必须返回一个数组:
[0]: true/false indicating whether or not this date is selectable [1]: a CSS class name to add to the date's cell or "" for the default presentation [2]: an optional popup tooltip for this date
[0]:true / false表示此日期是否可选[1]:要添加到日期单元格的CSS类名称或默认演示文稿的“”[2]:此日期的可选弹出工具提示
The function is called for each day in the datepicker before it is displayed.
在显示日期选择器之前,每天都会调用该函数。
beforeShowDay: function(date) {
var day = dt.getDay();
var hour = dt.getHours();
if( day == 4) {
// this is an example of how to use
//first parameter is disable or not this date
//second parameter is the class you want to add ( jquery will remove the click listener, but you probebly want to style it like this date is not available
//third optional tootltip like 'closed on weekends'
return [false,'disabled','weekend']
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.