jQueryUI Datepicker组件设置日期高亮

最近在看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函数定义了需要高亮的三个日期，当初始化的日期等于这个日期中的一个的时候，设置这个日期为高亮，否则返回默认值。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQueryUI Datepicker组件设置日期高亮

    最近在看JQueryUI Datepicker组件的时候想到有时候我们需要高亮某些日期,而不仅仅是当前日期和选中的日期,这是我们就需要在日历组件初始化的时候给某些日期设置成高亮,以表示这些日期和其它日期有区别,比如说可以表示这些日期有一些meeting或者task.对于这种需求可以通过使用组件的beforeShowDay(date)函数来实现,这个函数会在Datepicker组件初始化的时候对于每一天都调用一次这个函数来做一些定制的功能,从而正好可以实现我们所要的需求. 下面来看怎样实现 首先下

  • Jquery ui datepicker设置日期范围，如只能隔3天【实现代码】

    最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件,其中时间要设置为必选, 产品要叫日历控件做成只能做3天之内的查询,且日历控件要做成这样的要求,如果前一个日历控制选择了2013年9月1号 后面的日历控件只能选择2013年9月1号,2013年9月2号,2013年9月3号,其他的全部要不能选,本来想叫他给提示的,领导非要这么干 真是领导一句话,码工辛苦好几

  • 设置jQueryUI DatePicker默认语言为中文

    datepicker控件默认是英文的,可以在构造datepicker时通过monthNames.dayNames属性来指定月.日的中文显示值,但是每次使用是都配置这些属性不免太麻烦了,可以增加一个js文件将中文配置都放在里面,每次使用直接引用即可,这里放在jquery.ui.datepicker-zh-CN.js中,内容如下: 复制代码 代码如下: jQuery(function($){      $.datepicker.regional['zh-CN'] = {          close

  • vue时间组件DatePicker组件的手写示例

    vue时间组件DatePicker组件的手写示例

    概述 在日常工作中,比不可少会用到时间组件,我们的第一反应就是直接到组件库去找一下现成的来用下,毕竟,时间组件看起来还是很复杂的,对于没接触过的人来说,要自己去写一个这样的组件出来,还是有难度的,但是作为一名前端开发,这么常见的组件,我们还是值得取自己写一个这样的组件的,现在就手把手带你实现vue中的DatePicker组件.看完不会找我. 前置知识 在开始写代码之前,建议代价先看看时间组件的布局,目前主流的组件库iview ,element等提供的时间组件布局都基本类似,功能也差不多,因此在这

  • jQueryUI DatePicker 添加时分秒

    jQueryUI DatePicker 添加时分秒

    jquery.ui 的 datepicker 默认是年月日的jquery 插件,如果添加时分秒 只需要做如下修改即可 1. 下载jquery-ui-timepicker-addon.js ,并在页面加载 2. 页面添加如下 timepicker 的样式即可 复制代码 代码如下: .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }  .ui-timepicker-div dl { text-align: left; }  .ui

  • Python的Django框架中设置日期和字段可选的方法

    设置字段可选 在摆弄了一会之后,你或许会发现管理工具有个限制:编辑表单需要你填写每一个字段,然而在有些情况下,你想要某些字段是可选的. 举个例子,我们想要Author模块中的email字段成为可选,即允许不填. 在现实世界中,你可能没有为每个作者登记邮箱地址. 为了指定email字段为可选,你只要编辑Book模块(回想第五章,它在mysite/books/models.py文件里),在email字段上加上blank=True.代码如下: class Author(models.Model): f

  • matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)

    1.横坐标设置时间格式 import matplotlib.pyplot as plt import matplotlib.dates as mdates # 配置横坐标为日期格式 plt.gca().xaxis.set_major_formatter(mdates.DateFormatter('%Y/%m/%d')) plt.gca().xaxis.set_major_locator(mdates.DayLocator()) 例子: from datetime import datetime

  • 在vue中通过render函数给子组件设置ref操作

    正常我们的写法是,这样ref不会生效,h是作用在渲染的时候的,而ref是渲染之后才创建的,因此在h函数中使用ref是无效的. render: (h, params) => { return h(expandRow, { ref:'child', props: { row: params.row } }) } 我们常见h函数的用法是: render: (h) => { return h(ele) } => 是es6的用法,相当于 (h) => {} 相当于 function(){},

  • vue组件的路由高亮问题解决方法

    vue组件的路由高亮问题解决方法

    前言 之前我对于路由的高亮都是使用缓存,给他的所有路由遍历一遍,每点击一下的时候,给他的当前值高亮,赋值active.后来发现一刷新就不行,高亮的就变成默认值0了,这里主要是讲这个问题的解决办法. 第一种是通过这样的添加类: .router{ font: 12px/40px '微软雅黑'; background: pink; background: pink; color: white; cursor: pointer; text-align: center; display: inline-b

  • 关于el-select组件设置默认值的实现方式

    关于el-select组件设置默认值的实现方式

    目录 el-select组件设置默认值问题 如何给el-select赋默认值 el-select组件设置默认值问题 最近写项目的时候遇到将el-select组件设置默认值需求,通过查阅资料发现很多是使用v-model来实现的,但是只用v-model可能会有一些小小的问题. 因此根据他们的进行改变了一下 实现方式 el-select组件:    <el-select v-model="templateValue" placeholder="请选择模板" @cha

随机推荐