MyDate97日历控件 和 Jquery 做成的 工作日维护

最新推荐文章于 2017-11-10 12:57:11 发布
最新推荐文章于 2017-11-10 12:57:11 发布
阅读量1.4w 收藏 6
点赞数 3
文章标签： 日历 jquery 工作 iframe div table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gavin_luo/article/details/3790886
版权
前几天，一个需求是要做工作日的日历维护，很多企业软件都会要有这个东西，因为牵扯到员工考核，工资等等，这个任务光荣的被我接收了 一下是我做的界面，日历加载的时候要初始化一下，把默认选中的日期去掉，这个地方用到了一个锁屏的插件，也是Jquery写的。其实就是在最顶层加了一个Div，这个Div为灰色半透明。

难点：在加载日历的时候每个日历是个单独的Iframe，这是MyDate97的特点，我改不了-_- 

所以，在初始化的时候，你必须延迟1秒，等带Iframe里面加载好了，才能跨域操作里面的<td>，否则你虽然在你的页面写$(document).reday(fucntion (){跨域操作}),还是会报错，而且，就算你延迟一秒也不能保证，所以还得抓异常，如果有异常叫用户重新刷新-_-。

跨域操作

currentIframeDocument = $(document.frames[1].document);

用$()  是因为要把Iframe变成一个Jquery对象

有了这个对象，然后你在用筛选器去找到你要找的那个标签

看了源码，MyDate97的平板日历，是用Table做的

日期的样式主要有这几个   

Wday  黑色的  正常

Wwday  红色的 周末

Wselday  选中的

好了，你就跨域玩吧  有什么问题可以给我留言  :)


2012-07-10 更新：在下面附加了Js的源码，感谢大家关注

 

 

1月份是改过的 ，把12 13 14 16 设置成了周末

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	
        假期日历设置
</title><link id="Link1" href="../style/zh/1/css.css" type="text/css" rel="Stylesheet" />

    <script language="javascript" type="text/javascript" src="../js/DatePicker/WdatePicker.js"></script>

    <script type="text/javascript" src="../Js/jquery.js"></script><script src="/Js/jquery.messager.js" type="text/javascript"></script><script src="/Js/AutoComplate/jquery.autocomplete.js" type="text/javascript"></script><link href="/Js/AutoComplate/jquery.autocomplete.css" rel="stylesheet" type="text/css"><script src="/Js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script><link href="/Css/themes/gray/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />

    <script language="javascript" type="text/javascript" src="../js/jquery.blockUI.js"></script>

    

    <script type="text/javascript">
        //     $(document).ready(function() { initCustomEdit();});
        var currentIframeDocument = null;
        var currentDataM = null;
        var currentDataD = null;
        //初始化12个日历
        function InitDate() {
            for (i = 1; i <= 12; i++) {
                WdatePicker({ eCont: 'month' + i,
                    startDate: '2012-' + i + '-1',
                    minDate: '2012-' + i + '-1',
                    maxDate: '2012-' + i + '-%ld',
                    onpicked: function(dp) {
                        $("#txtSelectDate").val(dp.cal.getDateStr('yyyy-MM-dd HH:mm'));
                        currentDataM = dp.cal.getDateStr('M');
                        currentDataD = dp.cal.getDateStr('d');
                        currentIframeDocument = $($("iframe")[parseInt(currentDataM) - 1].contentDocument)
                        UpdatePickerWwday(currentDataD);
                    }
                });

            }
        }
        //更新选中项
        function UpdatePickerWwday(obj) {
            $.each(currentIframeDocument.find("td[class='Wwday']"),
                            function(i, n) {
                                $(n).attr("class", "Wday");
                            }
                           );
            $.each(currentIframeDocument.find("td[class='Wday']"),
        function(i, n) {
            var freeDays = $("#hdnWwdata" + currentDataM).val().split(",");
            var k = 0;
            for (k = 0; k < freeDays.length; k++) {
                if ($(n).text() == freeDays[k]) {
                    $(n).attr("class", "Wwday");
                    $(n).mouseover(function(event) { this.className = 'WwdayOn' })
                    $(n).mouseout(function(event) { this.className = 'Wwday' });
                }
            }
        }
       );
        }
        //初始化节假日
        function InitSelect() {
            var action = 'EDIT';
            if (action == "EDIT") {
                var k = 0;
                try {
                    for (k = 0; k < 12; k++) {
                        var iObj = $($("iframe")[k].contentDocument);
                        $.each(iObj.find("td[class='Wwday']"),
                                function(i, n) {
                                    $(n).attr("class", "Wday");
                                    $(n).mouseover(function(event) { this.className = 'WdayOn' })
                                    $(n).mouseout(function(event) { this.className = 'Wday' });
                                }
                               );

                        var selday = iObj.find("td[class='Wselday']");
                        selday.attr("class", "Wday");
                        selday.mouseout(function(eent) { this.className = 'Wday' });
                        $.each(iObj.find("td[class='Wday']"),
                                function(i, n) {
                                    var freeDays = $("#hdnWwdata" + (k + 1)).val().split(",");
                                    var j = 0;
                                    for (j = 0; j < freeDays.length; j++) {
                                        if ($(n).text() == freeDays[j]) {
                                            $(n).attr("class", "Wwday");
                                            $(n).mouseover(function(event) { this.className = 'WwdayOn' })
                                            $(n).mouseout(function(event) { this.className = 'Wwday' });
                                        }
                                    }
                                }
                               );

                    }
                } catch (err) {
                    document.getElementById("lblMsg").innerText = "Initialize data fail, please try it again";
                } finally {
                    $.unblockUI();
                }
            } else {
                var k = 0;
                try {
                    for (k = 0; k < 12; k++) {
                        var iObj = $($("iframe")[k].contentDocument);
                        $.each(iObj.find("td[class='Wwday']"),
                                function(i, n) {
                                    $("#hdnWwdata" + (k + 1)).val($("#hdnWwdata" + (k + 1)).val() + "," + $(n).text());
                                }
                               );
                        var selday = iObj.find("td[class='Wselday']");
                        if ($("#hdnWwdata" + (k + 1)).val().charAt(1) == "7") {
                            selday.attr("class", "Wwday");
                            selday.mouseover(function(event) { this.className = 'WwdayOn' })
                            selday.mouseout(function(event) { this.className = 'Wwday' });
                        } else if ($("#hdnWwdata" + (k + 1)).val().charAt(1) == "2" && $("#hdnWwdata" + (k + 1)).val().charAt(3) != "3") {
                            selday.attr("class", "Wwday");
                            selday.mouseover(function(event) { this.className = 'WwdayOn' })
                            selday.mouseout(function(event) { this.className = 'Wwday' });
                        } else {
                            selday.attr("class", "Wday");
                            selday.mouseover(function(event) { this.className = 'WdayOn' })
                            selday.mouseout(function(event) { this.className = 'Wday' });
                        }
                    }
                } catch (err) {
                    document.getElementById("lblMsg").innerText = "Initialize data fail, please try it again";
                } finally {
                    $.unblockUI();
                }
                for (k = 1; k < 13; k++) {//去掉第一个逗号
                    $("#hdnWwdata" + k).val($("#hdnWwdata" + k).val().substring(1));
                    if ($("#hdnWwdata" + k).val().substring(0, 1) == "2" || $("#hdnWwdata" + k).val().substring(0, 1) == "7") {//如果当月的1号是星期天，或者是星期六则选不中，需要手动添加
                        $("#hdnWwdata" + k).val("1," + $("#hdnWwdata" + k).val())
                    }
                }
            }
        }

        $(document).ready(function() {
            $.blockUI();
            InitDate();
            setTimeout("InitSelect()", 2000);
        });
        //添加休假日
        function AddWwDate_Click() {
            if (check()) {
                var obj = currentIframeDocument.find("td[class='Wselday']");
                obj.attr("class", "Wwday");
                obj.mouseover(function(event) { this.className = 'WwdayOn' })
                obj.mouseout(function(event) { this.className = 'Wwday' });
                AddFreeDay();
                $("#txtSelectDate").val("");
            } else {
                document.getElementById("lblMsg").innerText = "please select date";
            }
        }
        //添加工作日
        function AddWDate_Click() {
            if (check()) {
                var obj = currentIframeDocument.find("td[class='Wselday']");
                obj.attr("class", "Wday");
                obj.mouseover(function(event) { this.className = 'WdayOn' })
                obj.mouseout(function(event) { this.className = 'Wday' });
                AddWorkDay();
                $("#txtSelectDate").val("");
            } else {
                document.getElementById("lblMsg").innerText = "please select date";
            }
        }
        function check() {
            if ($("#txtSelectDate").val() == "") {
                return false;
            } else {
                return true;
            }
        }
        function AddWorkDay() {
            var freeDays = $("#hdnWwdata" + currentDataM).val().split(",");
            var i = 0;
            var count = freeDays.length;
            for (i = 0; i < freeDays.length; i++) {
                if (currentDataD == freeDays[i]) {
                    freeDays.splice(i, 1);
                    break;
                }
            }
            $("#hdnWwdata" + currentDataM).val(freeDays);
        }

        function AddFreeDay() {
            var freeDays = $("#hdnWwdata" + currentDataM).val().split(",");
            var i = 0;
            var count = freeDays.length;
            for (i = 0; i < freeDays.length; i++) {
                if (currentDataD == freeDays[i]) {
                    break;
                }
            }
            if (i == count) {
                freeDays.push(currentDataD);
            }
            $("#hdnWwdata" + currentDataM).val(freeDays);

        }
        function UpdateFreeDay() {
            var freeDays = $("#hdnWwdata" + currentDataM).val().split(",");
            var i = 0;
            var count = freeDays.length;
            for (i = 0; i < freeDays.length; i++) {
                if (currentDataD == freeDays[i]) {
                    freeDays.splice(i, 1);
                    break;
                }
            }
            if (i == count) {
                document.getElementById("lblMsg").innerText = "add " + currentDataD;
                freeDays.push(currentDataD);
            }
            $("#hdnWwdata" + currentDataM).val(freeDays);

        }

    </script>

    <script type="text/javascript" src="../Js/util.js"></script>

    <style type="text/css">
        .style1
        {
            width: 200px;
        }
        .style2
        {
            width: 404px;
        }
    </style>
<script src="/Js/checkbox_zh.js?t=20111226" type="text/javascript"></script><link href="/style/zh/8/css.css" rel="stylesheet" type="text/css"></head>
<body>
    <form name="form1" method="post" action="Calendar.aspx?GID=DBA.2012&action=edit" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTk2OTE0MjkyMg8WAh4LY3VycmVudHllYXIB3AcWAgIDD2QWAgIDDw8WBB4EVGV4dAUJ5a6M5oiQKFMpHglBY2Nlc3NLZXkFAVNkZGQb5B5Yn9dWUODWwrhaxvvzKUQq9w==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


    <div id="top">
        <table>
            <tr>
                <td>
                    <span id="lblNavigation" class="navigationlabel">假期日历</span>
                </td>
                <td style="padding-left: 5px;">
                    <input type="submit" name="btnSave" value="完成(S)" id="btnSave" accesskey="S" class="enButton" />
                </td>
            </tr>
        </table>
        <input type="hidden" name="hdnWwdata1" id="hdnWwdata1" value="1,7,8,14,15,21,22,28,29" />
        <input type="hidden" name="hdnWwdata2" id="hdnWwdata2" value="4,5,10,11,12,17,18,19,25,26" />
        <input type="hidden" name="hdnWwdata3" id="hdnWwdata3" value="3,4,10,11,12,17,18,24,25,31" />
        <input type="hidden" name="hdnWwdata4" id="hdnWwdata4" value="1,7,8,14,15,21,22,28,29" />
        <input type="hidden" name="hdnWwdata5" id="hdnWwdata5" value="5,6,12,13,16,19,20,26,27" />
        <input type="hidden" name="hdnWwdata6" id="hdnWwdata6" value="1,2,3,9,10,16,17,23,24,30" />
        <input type="hidden" name="hdnWwdata7" id="hdnWwdata7" value="1,7,8,14,15,21,22,28,29" />
        <input type="hidden" name="hdnWwdata8" id="hdnWwdata8" value="4,5,11,12,18,19,25,26" />
        <input type="hidden" name="hdnWwdata9" id="hdnWwdata9" value="1,2,8,9,15,16,22,23,29,30" />
        <input type="hidden" name="hdnWwdata10" id="hdnWwdata10" value="6,7,13,14,20,21,27,28" />
        <input type="hidden" name="hdnWwdata11" id="hdnWwdata11" value="3,4,10,11,17,18,24,25" />
        <input type="hidden" name="hdnWwdata12" id="hdnWwdata12" value="1,2,8,9,15,16,22,23,29,30" />
    </div>
    <div id="lblMsg" class="label_message">
    </div>
    <div id="top_input">
        <div style="float: left; width: 8px;" class="tabL">
        </div>
        <div class="tabLabelCont tabCur" οnclick="" id="div1">
            <span id="one1" class="navigationlabel hover">假期日历</span>
        </div>
        <div style="float: left;" class="tabR">
        </div>
    </div>
    <div id="autodiv_input">
        <table cellpadding="0" cellspacing="0" style="margin-left: 5px; width: 750px; margin-right: 3px;
            margin-top: 3px; margin-bottom: 3px;">
            <tr>
                <td width="150">
                    <input name="txtSelectDate" type="text" id="txtSelectDate" class="bigInputbox" />
                </td>
                <td class="style1" style="padding-left: 25px;">
                    <input id="btnAddWwDate" type="button" value="设置为节假日" οnclick="AddWwDate_Click()"
                        class="enButton" />
                </td>
                <td class="style2">
                    <input id="btnAddWDate" type="button" value="设置为工作日" οnclick="AddWDate_Click()" class="enButton" />
                </td>
                <td>
                     
                </td>
            </tr>
            <tr>
                <td colspan="4">
                     
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <table style="width: 100%;">
                        <tr height="190">
                            <td>
                                <div id="month1">
                                </div>
                            </td>
                            <td>
                                <div id="month2">
                                </div>
                            </td>
                            <td>
                                <div id="month3">
                                </div>
                            </td>
                            <td>
                                <div id="month4">
                                </div>
                            </td>
                        </tr>
                        <tr height="190">
                            <td>
                                <div id="month5">
                                </div>
                            </td>
                            <td>
                                <div id="month6">
                                </div>
                            </td>
                            <td>
                                <div id="month7">
                                </div>
                            </td>
                            <td>
                                <div id="month8">
                                </div>
                            </td>
                        </tr>
                        <tr height="190">
                            <td>
                                <div id="month9">
                                </div>
                            </td>
                            <td>
                                <div id="month10">
                                </div>
                            </td>
                            <td>
                                <div id="month11">
                                </div>
                            </td>
                            <td>
                                <div id="month12">
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>



gavinluo
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 57
    评论
JS日历插件 - My97 DatePicker用法详解
dengla6847的博客
06-04 798
一、简介 1. 注意事项 （1）My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名； （2）各目录及文件的用途: WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名 config.js 语言和皮肤配置文件,无需引入(4....
MY97日历控件
05-14
在本文中，我们将深入探讨MY97日历控件的核心特性、安装与使用方法、以及如何进行自定义配置，以帮助开发者更好地理解和应用这一工具。 一、MY97日历控件的核心特性 1. 用户友好：MY97日历控件提供直观的用户界面...
工作日历维护
05-23
Java开发的工作日历，兼容所有数据库，因为我是用了XML，非常方便。如果你还在为计算休息日苦恼，下载一个体验吧。界面非常友好，简单。
日期控件
weixin_30619101的博客
05-09 179
My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。 1、下载My97DatePicker组件包 下载地址：http://download.csdn.net/detail/emoven/8249073 2、在页面中引入该组件js文件： <script type="text/JavaScript" src="My97DatePicke...
Jquery控制My97DatePicker控件的日期格式
babyduncan的专栏
11-15 242
最近的项目，要取时间段进行统计，按照年月日时等方法，取按年统计的时候，我们希望时间控件只能选择年，按照月统计时候，我们希望只能选择年月这两项，因此写了这个小程序。 firefox测试可用。 [code="java"] 测试jquery控制My97DatetimePicker格式 $(document).ready(func...
MyDate97日历控件初始化及时间约束的相关方法
海阔天空
04-23 5578
引入My 第一个日历控件的最大日期： #F{$dp.$D(\'endDate\')||'%y-%M-%d'} --其中endDate为第二个日历控件的id 默认日期为当前日期 ${.now?string('yyyy-MM-dd')} 第二个日历控件的最小日期 #F{$dp.$D(\'startDate\')} --其中endDate为第一个日历控件的id 控制前
mydate97日期控件
07-18
"mydate97日期控件"正是一款基于JavaScript编写的高效日历组件，它以其独特的特性和丰富的自定义选项，深受开发者们的青睐。 mydate97日期控件的核心优势在于它的轻量级和灵活性。JavaScript作为一种客户端脚本语言...
my97日历控件跟ie8不兼容 解决方案
11-22
"my97日历控件"是一款广泛使用的JavaScript日期选择插件，它提供了丰富的自定义功能和良好的用户体验。然而，正如标题和描述所指出的，这个控件在Internet Explorer 8（简称IE8）上可能会出现兼容性问题。这个问题...
最新版的MyDate97日期控件和Demo页面
04-15
MyDate97日期控件是一款在IT行业中广泛应用的前端组件，尤其在开发Web应用程序时，为用户提供方便的日期选择功能。这款控件以其易用性和灵活性而受到开发者的青睐。"最新版的MyDate97日期控件和Demo页面"包含了一个...
My97日历控件
02-25
My97日历控件是一款广泛应用于Web开发中的JavaScript组件，尤其在ASP页面中非常常见。这个控件为用户提供了直观、美观的日历选择界面，极大地提升了网站与用户的交互体验。下面将详细介绍My97日历控件的核心功能、...
工作日历插件
12-03
提交对工作日进行设置的前天插件，后台根据数据格式可进行设置
年日历实现，维护工作日和休息日，初始化法定节假日
03-18
1、年日历实现， 2、维护工作日和休息日， 3、初始化法定节假日
日程功能 每日工作安排 日历 插件
04-13
日程功能 每日工作安排 日历 插件 js jquery 功能很强大 可以运行 不过需要自己进行部分扩展
可以进行工作日设定的日历
01-24
可以进行工作日设定的日历，前台jsp，与博客中的后台可以完成将日期存入数据库
jQuery插件Simple-calendar日历阴历日期bug的修改
01-07
jQuery已经有一年没人维护了 最近在做工作中发现阴历日期出现不三个bug 还是被用户发现的 尴尬 ，问题1:好像是自从2020年4月后的阴历日期显示不正确，总是错3位天，个别情况还会出有些月份会有两个初一到初四 问题二：阴历日期初十，二十、三十显示不正确（都是显示十日，二日，三日），问题三：每年春节显示undefined 针对以上三个问题对源码进行修改，如有问题可以私信我 附带jQuery插件库的链接https://www.jq22.com/jquery-info9256 这些问题都可以在官网上预览看到 关注我即可免费下载 多谢支持
JQuery DatePicker之 工作日维护
zzg262607zzg的专栏
03-22 285
这两天研究JQuery DatePicker，弄的头很疼，不过学习成果也不错。 把自己认为重点的列出来以备以后学习，JQuery UI 版本jquery-ui-1.8.13.custom 现在想做一个工作日维护的功能，界面很简单。打开界面，显示一年的日期，默认六日为休息日显示为红色，其他日期黑色表示工作日，用户点击日期进行工作日和非工作日的转换。 功能简单吧，选来选取插件用什么...
天易30----jquery easy UI 自定义Editor日期控件(日期控件用的my97 date)
天易
06-17 4842
先看看最终效果： 代码如下： 1.columns中的代码： [java] view plaincopy    [java] view plaincopy {field : 'deliveryDate',title : '交货日期',width : 145,resizable:false,
my97前端日期插件使用示例
程序人生
11-10 2020
my97前端日期插件使用示例首先，将my97日期插件的My97DatePicker文件夹整个放到项目的js文件夹下：编写前端代码，日期输入框的代码如下：&lt;!-- 这里可以用dateFmt写日期格式，比如说yyyy-MM-dd格式 --&gt; &lt;input type=&quot;text&quot; class=&quot;Wdate&quot; name=&quot;datetime&quot; id=&quot;
MyDate97只显示年月
最新发布
05-17
如果你想在 MyDate97 中只显示年月，可以使用 SimpleDateFormat 类中的 "yyyy-MM" 格式化日期。以下是一个示例代码： ```java import java.text.SimpleDateFormat; import java.util.Date; public class MyDate97 ...
评论 57
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值