My97DatePicker使用

選擇My97DatePicker原因在於，可以通過此插件非常容易的選擇任何類型的日期，如年，季度，月，周，日，時，分，秒等

1，jsp頁面導入js:

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

2,jsp頁面，分別取年，季度，月，周，日，時，分，秒等

<div  style="text-align: center;margin-bottom: 25px">
            <span class="fontTitle">統計類型:</span>
            <select id="countType" class="fontForIn" οnchange="getCountType()">
                <option value="reason">不良原因</option>
                <option value="product">產品類別</option>
            </select>    
            <span class="fontTitle">時間段類型:</span>
            <select id="badReasonType" οnchange="checkDate();" class="fontForIn">
                <option value="day">日不良統計</option>
                <option value="week">周不良統計</option>
                <option value="month">月不良統計</option>
                <option value="quarter">季度良統計</option>
                <option value="year">年度良統計</option>
            </select>    
            <span class="fontTitle">具體時間:</span>
            <!--僅展示年份-->
            <input id="yearDate" style="display: none" class="Wdate" type="text" οnfοcus="WdatePicker({dateFmt:'yyyy年',maxDate:'%y-%M-%d'})" />
            <!--展示季度-->
            <input id="quarterDate" style="display: none" οnclick="WdatePicker({dateFmt:'yyyy年M季度', isQuarter:true, isShowOK:false,
            disabledDates:['....-0[5-9]-..','....-1[0-2]-..'], startDate:'%y-01-01',maxDate:'%y-%M-%d' })" class="Wdate"/>
            <!--展示月分-->
            <input id="monthDate" style="display: none"  class="Wdate" type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-MM',maxDate:'%y-%M-%d'})"/>
            <!--展示周-->
            <input id="weekDate" class="Wdate" style="display: none" οnfοcus="WdatePicker({isShowWeek:true,onpicked:funweek,errDealMode:3,maxDate:'%y-%M-%d'})"/>
            <!--展示具體日期-->
            <input id="dayDate" type="text"  class="Wdate" type="text" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d'})"/>
            <input type="button"   οnclick="getResult();" value="查詢" class="btn btn-primary">
        </div>

其中展示周時，觸發js方法如下：

function funweek(){ //日曆插件中，選擇周時，改變周的樣式
    $dp.$('weekDate').value=$dp.cal.getP('y')+$dp.cal.getP('W','WW');
}

當點擊時間段類型時，展示部分隨着選擇統計類型變更js如下：

function checkDate() { //日曆頁面切換
    var badReasonType = $("#badReasonType").val();
    switch(badReasonType){
        case "day":
            $("#dayDate").show();
            $("input[class='Wdate'][id!='dayDate']").hide();break;
        case "week":
            $("#weekDate").show();
            $("input[class='Wdate'][id!='weekDate']").hide();break;
        case "month":
            $("#monthDate").show();
            $("input[class='Wdate'][id!='monthDate']").hide();break;
        case "quarter":
            $("#quarterDate").show();
            $("input[class='Wdate'][id!='quarterDate']").hide();break;
        case "year" :
            $("#yearDate").show();
            $("input[class='Wdate'][id!='yearDate']").hide();break;
        default: break;
    }
  }

具體使用參看官網：http://www.my97.net/dp/demo/index.htm