原由

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

想法

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

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



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

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

难点：

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

解决：

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

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

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

代码比较简单：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>WdatePicker test</title>

</head>

<body>

    <input id="Text1" type="text" />

    <input id="Text2" type="text" />

</body>

</html>

<script src="../Jquery-1.8.2.min.js"></script>

<script src="WdatePicker.js"></script>

<script type="text/javascript">

    $(function () {

        $('#Text1,#Text2').each(function (index, element) {

            $(element).bind('click', bindDatepicker(this));

        });

    });

    function bindDatepicker(obj) {

        $(obj).bind("click", function () {

            WdatePicker({

                el: obj,

                autoPickDate: true,

                Mchanged: setCalendar

            });

            setCalendar();

        });

    }

    //对日历设置

    function setCalendar() {

        var WdateIframe = $dp.dd.getElementsByTagName("iframe");

        if (WdateIframe.length > 0) {

            WdateIframe = WdateIframe[0];

        } else {

            return;

        }

        var reg = /day_Click\((\d{4}),(\d{1,2}),(\d{1,2})\);/;

        var doc = WdateIframe.contentWindow.document;

        var _tables = doc.getElementsByTagName("table");    //当日历表格加载后才执行事件处理

        if (_tables.length == 0) {

            setTimeout(setCalendar, 100);

            return;

        }

        $(doc).find('.WdayTable td').each(function (index, element) {

            var html = element.outerHTML;

            var m = reg.exec(html);

            if (m) {

                //m[1],m[2],m[3]分别为年月日

                var date = m[1] + '-' + m[2] + '-' + m[3];

                //此段可以作出判断，比如是节假日时候处理

                if (m[3] % 3 == 0) {

                    element.innerHTML = "<span style='color:#eeeeee; font-weight:bold;'>" + m[3] + "</span>";

                    element.onclick = function () {

                        alert( " 单击了日期：" + date);

                        return;

                    };

                }

            }

        });

    }

</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. 关于安装 Microsoft Office

    安装 Microsoft Office 道路可谓漫漫…… 学校信息网络中心提供的“正版Office”安装了好几次都没成功…… [关于安装包和安装] 看了这篇经验,还不错:  office2018官方下 ...

  2. JAVA方法中的参数用final来修饰的原因

    JAVA方法中的参数用final来修饰的原因   很多人都说在JAVA中用final来修饰方法参数的原因是防止方法参数在调用时被篡改,其实也就是这个原因,但理解起来可能会有歧义,有的人认为是调用语句的 ...

  3. web字体分析

    一.衬线字体与非衬线字体 衬线体(serif)和无衬线体(sans-serif)的分类起源于英文字体界. 衬线体(serif)-Georgia-Times 「衬线」指的是字形笔画在首位的装饰和笔画的粗 ...

  4. C#指定长度截取字符串 并进行拼接。

    需求:有一个字符串需要按照指定长度拆分出来,然后在增加一个字符串拼接上. /// <summary> /// 字符串截取并拼接 /// </summary> /// <p ...

  5. 企业和个人都需要的终极跨平台全端解决方案 UniApp

    相信大家在平时开发过程中都会遇到这两类问题: 很多中小型企业要快速开发一个产品,这个产品至少需要覆盖平台范围为:ios.Android.web/H5.微信/支付宝小程序,那么需要的投入的人力成本.时间 ...

  6. Atitit 创业好处 Atitit 为什么我们要创业

    Atitit 创业好处 Atitit 为什么我们要创业 1.1. 提升学历 1 1.2. 提升自己的能力 1 1.3. 拓展视野 站在高层ceo 才能掌握全局.站在产业链高层,才可看到趋势. 1 1. ...

  7. 一致性 Hash 学习与实现

    普通的 Hash 解决的是什么问题? 下图是一个普通的余数法构造的哈希表. 一般在编程中使用哈希表,某个 bucket 突然就没了的概率比较小,常见的是因为负载因子太大需要增加 bucket,然后 r ...

  8. Vue：$set和$delete

    一.$set 在开始讲解$set之前先看下面的一段代码,实现的功能:当点击“添加”按钮时,动态的给data里面的对象添加属性和值,代码示例如下: <!DOCTYPE html> <h ...

  9. 集合的最大缺点是无法进行类型判定（这个缺点在JAVA1.5中已经解决），这样就可能出现因为类型不同而出现类型错误。

    集合的最大缺点是无法进行类型判定(这个缺点在JAVA1.5中已经解决),这样就可能出现因为类型不同而出现类型错误. 解决的方法是添加类型的判断.      LinkedList接口(在代码的使用过程中 ...

  10. 嵌入式开发之zynqMp ---Zynq UltraScale+ MPSoC 图像编码板zcu102

    1.1 xilinx zynqMp 架构 1.1.1 16nm 级别工艺 Zynq UltraScale+  MPSoC架构 Xilinx新一代Zynq针对控制.图像和网络应用推出了差异化的产品系,这 ...