突出显示,禁用jQuery UI datepicker中的特定日期
在这里,我想实现以下目标
- 突出显示日期选择器中的所有假期
- 禁用日期选择器中的特定日期
- 禁用日期选择器中的特定周末
我有各自的片段,但我想要一起
小提琴: 工作演示
突出显示假期
var holydays = ['10/17/2013', '10/18/2013', '11/2/2013']; function highlightDays(date) { for (var i = 0; i < holydays.length; i++) { if (new Date(holydays[i]).toString() == date.toString()) { return [true, 'highlight']; } } return [true, '']; } $(function () { $("#dp").datepicker({ minDate: 0, dateFormat: 'mm/dd/yy', inline: true, numberOfMonths: [1, 2], dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], beforeShowDay: highlightDays, }); });
禁用特定日期
var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"]; function disableAllTheseDays(date) { var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); for (i = 0; i < disabledDays.length; i++) { if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) { return [false]; } } return [true]; }
禁用周末
$(function() { $( "#availability" ).datepicker({ minDate: 0, dateFormat: 'mm/dd/yy', inline: true, numberOfMonths: [1, 2], dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], beforeShowDay: $.datepicker.noWeekends }); });
任何人都可以帮助我..
提前致谢。
改变:
$(function () { $("#dp").datepicker({ minDate: 0, dateFormat: 'mm/dd/yy', inline: true, numberOfMonths: [1, 2], dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], beforeShowDay: setCustomDate // <-----change function }); });
添加function:
function setCustomDate(date) { var clazz = ""; var arr1 = highlightDays(date); if (arr1[1] != "") clazz = arr1[1]; var arr2 = disableAllTheseDays(date); var arr3 = $.datepicker.noWeekends(date); return [(!arr2[0] || !arr3[0]) ? false : true, clazz]; }
我们现在在2014年,需要一个最小的代码。 这是我禁用日期的方法。
我的变量’specific’,0 <= specific <= 7
in my demo :
1 = sunday
2 = saturday
4 = Monday to friday
if specific == 5 that mean 4 + 1 so i allow Monday till friday + sunday.
7表示允许选择的所有日期。 请注意,我现在只允许选择月份+ 1
$( "#datepicker" ).datepicker({ minDate:0, maxDate: '+1M-1D', dateFormat: "yy-mm-dd", beforeShowDay: function(date) { var day = date.getDay(); if(day == 6) return [(specific & 2) > 0, '']; else if(day == 0) return [(specific & 1) > 0, '']; else return [(specific & 4) > 0, '']; } });
仅供将来参考。 因为我正在寻找相同的东西,并发现这些相同的function,以禁用很多不同的地方的日子:
http://www.spiceforms.com/blog/how-to-disable-dates-in-jquery-datepicker-a-short-guide/ https://davidwalsh.name/jquery-datepicker-disable-days
var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"]; function disableAllTheseDays(date) { var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); for (i = 0; i < disabledDays.length; i++) { if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) { return [false]; } } return [true]; }
但是,由于您使用的是inArray,因此不需要for,从而实现了这种更简单,更高效的function:
var disabledDays = ["4-2-2016", "4-4-2016"]; function disableAllTheseDays(date) { var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) return [false]; return [true]; }
这个对我有用。 在关闭身体标签之前放置。
function DisableMonday(date) { var day = date.getDay(); if (day == 1) { return [false,"","Unavailable"] ; } else { return [true] ; } } jQuery(function($){ $('input[name="datum"]').datepicker('option', 'beforeShowDay', DisableMonday).datepicker('refresh'); });
- 如何将自定义类添加到我的JQuery UI Datepicker
- 如何防止jquery datepicker在初始页面加载时弹出但仍然滚动到datepicker文本框
- MVC3 + Datepicker +英国日期
- Bootstrap datepicker和bootstrapvalidation器
- 使用jQuery datepicker从ASP MVC @ Html.TextBoxFor Control中删除时间
- 如何在django中使用Datepicker
- Bootstrap datepicker无法正常工作
- bootstrap datepicker选项似乎不起作用(由vitalets提供的datepicker)
- jQuery DatePicker最小最大日期