My97DatePicker制作日、周、月、年报表界面

背景：接到制作日周月年报表开发任务，我个人经历了很多坑，首先是前端界面，我用My97DatePicker开发，一开始想用四个不同的页面分别显示，后面觉得统一在同一个界面显示效果更好，于是便用My97DatePicker和jqgrid和jQuery zTree做了前端页面

遇到的问题：1、一开始用一个selected和option选择日、周、月、年报，但是我在selected的onchange方法定义了切换规则，发现我无论怎么做出现My97DatePicker样式格式错误，这个原因是因为My97DatePicker没法在一个input标签反应我们的切换。因此我自己找了很多资料想解决，但解决不了。所以用了自己想的方式，我定义了四个标签My97DatePicker的input标签，当我selected发生改变时就分别显示和隐藏日、周、月、年的My97DatePicker的input标签。代码如下：

<input id="startDate"  class="text" type="text" lang='mustcheck' onChange="setTimeRange(this)" onfocus="btnCanClick()" autocomplete="off"
 onClick="WdatePicker({dateFmt:'yyyy年MM月dd日',readOnly: true, maxDate:'#F{$dp.$D(\'endDate\') || \'%y-%M-%d-%H-%m-%s\'}',lang:'<@spring.message code='site.date.language'/>'})" />

<input id="startDatew" style="display: none" class="text" type="text" lang='mustcheck' onChange="setTimeRange(this)" onfocus="btnCanClick()" autocomplete="off"
                   onClick="WdatePicker({maxDate:'#F{$dp.$D(\'endDate\')}',readOnly: true,isShowWeek:true,onpicked:funccc,errDealMode:3})" />

<input id="startDatem" style="display: none" class="text" type="text" lang='mustcheck' onChange="setTimeRange(this)" onfocus="btnCanClick()" autocomplete="off"
                   onClick="WdatePicker({dateFmt:'yyyy年MM月',readOnly: true,maxDate:'#F{\'%y-%M\'}',lang:'<@spring.message code='site.date.language'/>'})" />
<input id="startDatey" style="display: none" class="text" type="text" lang='mustcheck' onChange="setTimeRange(this)" onfocus="btnCanClick()" autocomplete="off"
                   onClick="WdatePicker({dateFmt:'yyyy年',eadOnly: true,maxDate:'#F{\'%y\'}',lang:'<@spring.message code='site.date.language'/>'})" />

报表类型的选择

<select id="selReportType" onchange="selReportType()">
           <option value="dayReport" selected="selected">日报</option>
           <option value="weekReport">周报</option>
           <option value="monReport">月报</option>
           <option value="yearReport">年报</option>
</select>       

function selReportType(){
		//rtype 获取选择的和全局变量的dayReport（初始化为“dayReport”）对比，为了后面其他地方的判断
        var rtype = document.getElementById("selReportType").value;
        if(rtype=="dayReport"){
            $("#startDatew").css("display","none");
            $("#startDatem").css("display","none");
            $("#startDatey").css("display","none");
            $("#startDate").css("display","inline");
            var dat = new Date();
            //给My97DatePicker的input标签赋切换的时候初始化的值（一进来界面的初始化值在js那边也要赋值一次）
            $dp.$('startDate').value =dat.format("yyyy年MM月dd日");
            abmodelParam = {'isLoad' : false}
            //记录选择的报表类型
            reporttype = 0;
            $.jgrid.gridUnload("#"+gridid);
        }
        else if(rtype=="weekReport"){;
            $("#startDate").css("display","none");
            $("#startDatem").css("display","none");
            $("#startDatey").css("display","none");
            $("#startDatew").css("display","inline");
            var dat = new Date();
            $dp.$('startDatew').value = getWeek(dat.format("yyyy-MM-dd"));
            abmodelParam = {'isLoad' : false}
            reporttype = 1;
            //卸载grid（这个是个大坑，当时折腾了好久），当grid的表头发生改变时要卸载，不然没法正常使用
            $.jgrid.gridUnload("#"+gridid);
        }
        else if(rtype=="monReport"){;
            $("#startDate").css("display","none");
            $("#startDatew").css("display","none");
            $("#startDatey").css("display","none");
            $("#startDatem").css("display","inline");
            var dat = new Date();
            $dp.$('startDatem').value =dat.format("yyyy年MM月");
            abmodelParam = {'isLoad' : false}
            reporttype = 2;
            $.jgrid.gridUnload("#"+gridid);

        }
        else if(rtype=="yearReport"){
            $("#startDate").css("display","none");
            $("#startDatew").css("display","none");
            $("#startDatem").css("display","none");
            $("#startDatey").css("display","inline");
            var dat = new Date();
            $dp.$('startDatey').value =dat.format("yyyy年");
            reporttype = 3;
            abmodelParam = {'isLoad' : false}
            $.jgrid.gridUnload("#"+gridid);
            $("#"+gridid).onclick();
            $("#"+gridid+"Div").onclick();

        }
    }

做周报时需要加上两个方法，一个是或许周数（为了初始化的显示），一个是My97DatePicker周数的样式。

function getWeek(date){
        date = new Date(date);
        var date2 = new Date(date.getFullYear(), 0, 1);
        var day1 = date.getDay();
        if (day1 == 0) day1 = 7;
        var day2 = date2.getDay();
        if (day2 == 0) day2 = 7;
        let d = Math.round((date.getTime() - date2.getTime() + (day2 - day1) * (24 * 60 * 60 * 1000)) / 86400000);
        //当周数大于52则为下一年的第一周
        if((Math.ceil(d / 7) + 1)>52){
		//自定义显示的格式
            return (date.getFullYear()+1)+"年第1周"
        }
        return date.getFullYear()+"年第"+(Math.ceil(d / 7) + 1)+"周";
    }

 function funccc(){
 		//可以自定义格式
        $dp.$('startDatew').value=$dp.cal.getP('y')+"年第"+$dp.cal.getP('W','WW')+"周";
        return ;
    }

记得自己也要去看一些My97DatePicker的属性和方法，不然看不懂怎么运用和自定义的