原由

在做系统时根据要求有时候需要屏蔽掉某些特殊的日期，像周日或者法定假日，以及一些调班的日期；使用WdatePicker可以屏蔽掉周日和大多数法定假日，但像清明或者调班的日期则不好处理。

想法

1：日历里不限制，但当选择时将选定的日期进行验证（使用onpicking事件），不符合则取消

好处是实现简单，缺点是日历上面没有标示，需要点到了才知道是不是允许的



2：当绑定时进行初始化一次日历，当月变更时也处理一次日历，把不符合条件的日期特殊处理

好处是用户使用时一看就知道哪些可用，哪些不可用

难点：

WdatePicker第一次绑定后再改变参数是不会有更新的，另外哪些日期是需要处理的不可能在绑定日期是就全部确定下来，要在月改变时动态取得，这时也无法通过日历自带的参数来处理（改了参数也没有用）

解决：

既然日历加载了便可以通过DOM处理，那就直接处理生成后的日历吧

在加载后处理一次，以后每次改变月时也处理一次（本示例中将WdatePicker的参数$crossFrame设置为false以简化DOM结构）

示例中把所有3的倍数的日期改变了颜色，单击事件也改变了，效果如下：

代码比较简单：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>WdatePicker test</title>
  6. </head>
  7. <body>
  8.     <input id="Text1" type="text" />
  9.     <input id="Text2" type="text" />
  10. </body>
  11. </html>
  12. <script src="../Jquery-1.8.2.min.js"></script>
  13. <script src="WdatePicker.js"></script>
  14. <script type="text/javascript">
  15.     $(function () {
  16.         $('#Text1,#Text2').each(function (index, element) {
  17.             $(element).bind('click', bindDatepicker(this));
  18.         });
  19.     });
  20.     function bindDatepicker(obj) {
  21.         $(obj).bind("click", function () {
  22.             WdatePicker({
  23.                 el: obj,
  24.                 autoPickDate: true,
  25.                 Mchanged: setCalendar
  26.             });
  27.             setCalendar();
  28.         });
  29.     }
  30.     //对日历设置
  31.     function setCalendar() {
  32.         var WdateIframe = $dp.dd.getElementsByTagName("iframe");
  33.         if (WdateIframe.length > 0) {
  34.             WdateIframe = WdateIframe[0];
  35.         } else {
  36.             return;
  37.         }
  38.         var reg = /day_Click\((\d{4}),(\d{1,2}),(\d{1,2})\);/;
  39.         var doc = WdateIframe.contentWindow.document;
  40.         var _tables = doc.getElementsByTagName("table");    //当日历表格加载后才执行事件处理
  41.         if (_tables.length == 0) {
  42.             setTimeout(setCalendar, 100);
  43.             return;
  44.         }
  45.         $(doc).find('.WdayTable td').each(function (index, element) {
  46.             var html = element.outerHTML;
  47.             var m = reg.exec(html);
  48.             if (m) {
  49.                 //m[1],m[2],m[3]分别为年月日
  50.                 var date = m[1] + '-' + m[2] + '-' + m[3];
  51.                 //此段可以作出判断，比如是节假日时候处理
  52.                 if (m[3] % 3 == 0) {
  53.                     element.innerHTML = "<span style='color:#eeeeee; font-weight:bold;'>" + m[3] + "</span>";
  54.                     element.onclick = function () {
  55.                         alert( " 单击了日期：" + date);
  56.                         return;
  57.                     };
  58.                 }
  59.             }
  60.         });
  61.     }
  62. </script>

WdatePicker日历添加事件，在任意月改变时处理日期事件的更多相关文章

  1. input中的内容改变时触发的事件

    input中的内容改变时触发的事件 1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发:onproperty ...

  2. 当input中的内容改变时触发的事件

    当input中的内容改变时触发的事件 1 $('#id').bind('input propertychange', function() { //处理内容 } 循环js事件 $(document). ...

  3. WPF当属性值改变时利用PropertyChanged事件来加载动画

    在我们的程序中,有时我们需要当绑定到UI界面上的属性值发生变化从而引起数据更新的时候能够加载一些动画,从而使数据更新的效果更佳绚丽,在我们的程序中尽量将动画作为一种资源放在xaml中,而不是在后台中通 ...

  4. 'input propertychange' 当输入框文字改变时触发的事件!

    $('.amount_input').bind('input propertychange', function() { console.log(2); $('.list label').remove ...

  5. vue中使用watch函数，当数据改变时自动引发事件

    本来我的需求是这样的,使用ElementUI的日期选择器,当日期选择器被更改时需要根据新日期来向服务器获取新数据,但是发现这个日期选择器没有change事件,后来终于发现vue有个watch函数就是用 ...

  6. javascript实现浏览器窗口大小被改变时触发事件的方法

    转载 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信 ...

  7. js | javascript实现浏览器窗口大小被改变时触发事件的方法

    转载 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信息: 代 ...

  8. c#winform关闭窗口时触发的事件

    用户关闭软件时,软件一般会给“是否确认关闭”的提示. 通常,我们把它写在FormClosing 事件中,如果确定关闭,就关闭:否则把FormClosingEventArgs 的 Cancel 属性设置 ...

  9. WdatePicker日历控件使用方法（转）

    转自:http://www.cnblogs.com/weixing/archive/2011/08/15/2139431.html WdatePicker日历控件使用方法   1. 跨无限级框架显示 ...

随机推荐

  1. ssh的用户配置文件config管理ssh会话

    抄的这个: https://www.cnblogs.com/zhonghuasong/p/7236989.html 只是在这里留个存档,防止删除 我有这样的需求就是,因为需要ssh连接到服务器,然后每 ...

  2. 《深度探索C++对象模型》调用虚函数

    如果一个类有虚函数,那么这个类的虚函数会被放在一个虚函数表里面, 使用这个类声明的对象中,会有一个指向虚函数表的指针,当使用指向 这个对象的指针或者这个对象的引用调用一个虚函数的时候,就会从虚函数表中 ...

  3. 系统管理员需知的 16 个 iptables 使用技巧

    现代 Linux 内核带有一个叫 Netfilter[1] 的数据包过滤框架.Netfilter 提供了允许.丢弃以及修改等操作来控制进出系统的流量数据包.基于 Netfilter 框架的用户层命令行 ...

  4. SELECT INTO和INSERT INTO SELECT的区别 类似aaa?a=1&b=2&c=3&d=4，如何将问号以后的数据变为键值对 C# 获取一定区间的随即数 0、1两个值除随机数以外的取值方法(0、1两个值被取值的概率相等) C# MD5 加密，解密 C#中DataTable删除多条数据

    SELECT INTO和INSERT INTO SELECT的区别   数据库中的数据复制备份 SELECT INTO: 形式: SELECT value1,value2,value3 INTO Ta ...

  5. Nginx的location匹配规则

    一 Nginx的location语法 location [=|~|~*|^~] /uri/ { … } =         严格匹配.如果请求匹配这个location,那么将停止搜索并立即处理此请求 ...

  6. 在IIS上安装 thinkphp的方法

    1. 在iis安装 urlwrite 2. 安装php处理程序映射 3. 在项目中建立web.config, 键入以下内容: <?xml version="1.0" enco ...

  7. docker下创建crontab定时任务失败

    创建过程 基础镜像采用的centos7.2,需要安装一下crontab,在dockerfile中加以下语句就可以了: # crontab jobs RUN yum -y install crontab ...

  8. 查看安装的react-native和react版本

    转:http://blog.csdn.net/miss_ok/article/details/52777115 npm info React-native(目前是0.34.1) 知道最新版本后,通过以 ...

  9. Gluon Datasets and DataLoader

    mxnet.recordio MXRecordIO Reads/writes RecordIO data format, supporting sequential read and write. r ...

  10. Selenium IDE 3.6 命令Command详解

    学以致用,个人觉得要学老外的东西,最好的方法就是自己翻译一遍.因此准备把SIDE官网的一些文档,按工作所需做些翻译整理.本文是命令这一块的提纲,未全部完成,占坑中. Selenium IDE中的命令其 ...