使用jQuery的dateselect器在特定范围内突出显示date

我需要突出显示开始date和结束date之间的date，我应该能够指定。 任何人都可以帮我吗？

Answer 1

您可以使用beforeShowDay事件 。 它将被调用，每个date需要显示在日历中。 它传递一个date并返回一个数组，其中[0] = isSelectable， 1 = cssClass，[2] =一些工具提示文本

$('#whatever').datepicker({ beforeShowDay: function(date) { if (date == myDate) { return [true, 'css-class-to-highlight', 'tooltipText']; } } }); 

Answer 2

这是一个可行的例子！ 你将需要从这里与http://jqueryui.com/download与核心，小部件和datepicker包。;

以前的javascript部分：

 <script> $(document).ready(function() { var dates = ['22/01/2012', '23/01/2012']; // //tips are optional but good to have var tips = ['some description','some other description']; $('#datepicker').datepicker({ dateFormat: 'dd/mm/yy', beforeShowDay: highlightDays, showOtherMonths: true, numberOfMonths: 3, }); function highlightDays(date) { for (var i = 0; i < dates.length; i++) { if (new Date(dates[i]).toString() == date.toString()) { return [true, 'highlight', tips[i]]; } } return [true, '']; } }); </script> 

HTML部分：

 <div id="datepicker"></div> 

添加这个CSS的地方：

  td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;} td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important; border: 1px #88a276 solid !important;} 

你将需要制作一个名为bg.png的小图片来使其工作

Answer 3

以为我会投入我的两分钱，因为它似乎更快，更重量轻比别人：

 jQuery(function($) { var dates = { '2012/6/4': 'some description', '2012/6/6': 'some other description' }; $('#datepicker').datepicker({ beforeShowDay: function(date) { var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(); if (search in dates) { return [true, 'highlight', (dates[search] || '')]; } return [false, '', '']; } }); }); 

Answer 4

不知道这是否仍然有用，但由于这对我有用，我想分享我所做的：

在我的JavaScript中：

 var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"]; $("#SomeID").datepicker({ beforeShowDay: highLight }); function highLight(date) { for (var i = 0; i < holidays.length; i++) { if (new Date(holidays[i]).toString() == date.toString()) { return [true, 'ui-state-holiday']; } } return [true]; } 

并在jquery-ui-theme.css中添加

 .ui-state-holiday .ui-state-default { color: red; } 

如果您还想突出显示周末，则必须改用此CSS

 .ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default { color: red; } 

这就是结果：

（请注意，我已经将我的语言configuration为西class牙语，但这对此代码并不重要）

Answer 5

如果你正在使用基思伍德的dateselect，你可以使用下面的例子

 $(selector).datepick({onDate: highlightDays}); function highlightDays(date) { return {selectable: true, dateClass: 'highlight-custom', title: 'tooltip'}; } 

Answer 6

mugur，你的代码在Firefox或Safari中并不适合我，它需要格式化date var（我从这里得到）。 这里

 function highlightDays(date) { for (var i = 0; i < dates.length; i++) { var d = date.getDate(); var m = date.getMonth(); m += 1; // JavaScript months are 0-11 var y = date.getFullYear(); var dateToCheck = (d + "/" + m + "/" + y); if (dates[i] == dateToCheck) { return [true, 'highlight', tips[i]]; } } return [true, '']; } 

当然，正如上面的函数所表示的那样，它不包含前导零填充，所以dates数组需要被改变为：

 var dates = ['22/1/2014', '23/1/2014']; 

Answer 7

晚会到了，但是这里有一个我用来testing的JSFiddle：

https://jsfiddle.net/gq6kdoc9/

HTML：

  <div id="datepicker"></div> 

JavaScript的：

 var dates = ['11/13/2017', '11/14/2017']; //tips are optional but good to have var tips = ['some description', 'some other description']; $('#datepicker').datepicker({ dateFormat: 'dd/mm/yy', beforeShowDay: highlightDays, showOtherMonths: true, numberOfMonths: 3, }); function highlightDays(date) { for (var i = 0; i < dates.length; i++) { if (new Date(dates[i]).toString() == date.toString()) { return [true, 'highlight', tips[i]]; } } return [true, '']; } 

和CSS：

 td.highlight { border: none !important; padding: 1px 0 1px 1px !important; background: none !important; overflow: hidden; } td.highlight a { background: #ad3f29 url(bg.png) 50% 50% repeat-x !important; border: 1px #88a276 solid !important; } 

build立在迈克上面的工作示例！