jQueryUI Datepicker组件设置日期高亮
2016-10-13 10:15
447 查看
最近在看JQueryUI Datepicker组件的时候想到有时候我们需要高亮某些日期,而不仅仅是当前日期和选中的日期,这是我们就需要在日历组件初始化的时候给某些日期设置成高亮,以表示这些日期和其它日期有区别,比如说可以表示这些日期有一些meeting或者task。对于这种需求可以通过使用组件的beforeShowDay(date)函数来实现,这个函数会在Datepicker组件初始化的时候对于每一天都调用一次这个函数来做一些定制的功能,从而正好可以实现我们所要的需求。
下面来看怎样实现
首先下载jquery-ui-1.11.1包,并解压。
然后在jquery-ui-1.11.1目录下创建一个calenar.html文件用来测试。
calenar.html的内容如下:
<!doctype html> <html lang="us"> <head> <meta charset="utf-8"> <title>jQuery UI Example Page</title> <link href="jquery-ui.css" rel="stylesheet"> <style> td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;} td.highlight a {background: #AABBCC !important; border: 1px #88a276 solid !important;} </style> <script src="external/jquery/jquery.js"></script> <script src="jquery-ui.js"></script> <script> $(function() { $( "#datepicker" ).datepicker({ inline: true, showButtonPanel: true, onSelect: function (dateText, inst) { alert(dateText); }, beforeShowDay: function(date) { var dates = ['09/01/2014', '09/02/2014', '10/01/2014']; var tips = ['09/01/2014', '09/02/2014', '10/01/2014']; for (var i = 0; i < dates.length; i++) { if (new Date(dates[i]).toString() == date.toString()) { return [true, 'highlight', tips[i]]; } } return [true, '']; } }); }); </script> </head> <body> <div id="datepicker"></div> </body> </html>
其中beforeShowDay函数定义了需要高亮的三个日期,当初始化的日期等于这个日期中的一个的时候,设置这个日期为高亮,否则返回默认值。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章推荐
- JQueryUI Datepicker组件设置日期高亮
- jqueryui的datepicker显示中文日期格式的设置
- element-ui的el-date-picker组件设置提交时的日期值格式
- android DatePickerDialog设置日期限制
- Silverlight DataGrid中无代码设置开始和结束日期的 DatePicker
- 利用JavaScript和bootstrap-datepicker设置可选日期
- 基于Silverlight DataGrid中无代码设置开始与结束日期DatePicker的实现方法
- jQuery UI Datepicker精美的日期选择组件
- Android中TimePicker与DatePicker时间日期选择组件的使用实例
- jQuery UI Datepicker精美的日期选择组件
- 我的组件库--java Date Picker 日历 日期选择器
- jQueryUI的datepicker日期选择器的使用方法
- WPF DATEPICKER 设置当前日期
- Android DatePickerDialog 设置日期范围
- Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
- bootstrap-datepicker 日期格式设置
- android应用开发揭秘examples_04-11笔记(DatePicker,TimePicker时间日期设置,略有改动)
- Jquery ui datepicker 设置日期范围,如只能隔3天 .
- Jquery ui datepicker 设置日期范围,如只能隔3天
- 各种杂项组件(3)之--CalendarView(日历视图)、DatePicker/TimePicker(日期、时间选择器)、NumberPicker(数值选择器)