zoukankan      html  css  js  c++  java
  • WdatePicker日历添加事件,在任意月改变时处理日期事件

    原由

    在做系统时根据要求有时候需要屏蔽掉某些特殊的日期,像周日或者法定假日,以及一些调班的日期;使用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>


  • 相关阅读:
    Mysql大量插入随机数据方法--存储过程
    Linux永久修改系统时间和时区方法
    python反转字符串(简单方法)及简单的文件操作示例
    sql怎么批量替换字段里的字符串的
    varchar和Nvarchar区别
    VS改大小写的快捷键
    SQL中PIVOT 行列转换
    [转]VS中展开和折叠代码
    Bootstrap 标签页(Tab)插件
    C# DataTable 和List之间相互转换的方法
  • 原文地址:https://www.cnblogs.com/apollokk/p/6713872.html
Copyright © 2011-2022 走看看