WdatePicker日历添加事件，在任意月改变时处理日期事件

来源：互联网发布：位面淘宝txt八零编辑：程序博客网时间：2024/06/05 07:54

原由

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

0 0