1、官網(wǎng)網(wǎng)址 http:///dp/demo/index.htm

2、具體使用，下載My97插件，以java為例，放到項目webapp目錄下引用，注意引用時要先引用jquery.js，再引用包中的WdatePicker.js文件。

<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
1
2
3

3、常用的配置

• 利用onclick或onfocus事件觸發(fā)

<input id="d11" type="text" onClick="WdatePicker()"/>
示例1-1-2 圖標(biāo)觸發(fā)


<input id="d12" type="text"/>
<img onclick="WdatePicker({el:'d12'})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle">
注意:只需要傳入控件的id即可  el：綁定控件
1
2
3
4
5
6
7

• 實際的格式與顯示的格式，多用于傳入后臺的格式與顯示不符的情況

<input id="d244" type="text" class="Wdate" onfocus="WdatePicker({dateFmt:'yyyy年M月d日',vel:'d244_2'})"/>
<input id="d244_2" type="text" />

注意:在實際應(yīng)用中,一般會把vel指定為一個hidden控件,這里是為了把真實值展示出來,所以使用文本框
關(guān)鍵屬性: vel 指定一個控件或控件的ID,必須具有value屬性(如input),用于存儲真實值(也就是realDateFmt和realTimeFmt格式化后的值)
1
2
3
4
5

• 日期開始時間不大于結(jié)束時間等限制

<input type="text" class="Wdate" id="d4321" onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4322\');}'})"/>
<input type="text" class="Wdate" id="d4322" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d4321\');}'})"/>
注意:
兩個日期的日期格式必須相同
$dp.$ 相當(dāng)于 document.getElementById 函數(shù).

使用 $dp.$D 函數(shù) 可以將日期框中的值,加上定義的日期差量:
兩個參數(shù): id={字符類型}需要處理的文本框的id值 , obj={對象類型}日期差量
日期差量用法:#F{$dp.$D(\'d4321\',{d:3});}
屬性y,M,d,H,m,s分別代表年月日時分秒
如 
為空時,表示直接取值,不做差量(示例4-3-1中的參數(shù)就是空的)
{M:5,d:7} 表示 五個月零7天
{y:1,d:-3} 表示 1年少3天
{d:1,H:1} 表示一天多1小時
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• onpicked函數(shù)

此處是在工作時遇到的，要求開始時間選擇之后，結(jié)束時間默認(rèn)填寫為當(dāng)前時間加1天的0點(diǎn)。

<input id="stTime" class="Wdate"  
onfocus="var ed=$dp.$('endTime');
        WdatePicker({dateFmt:\'yyyy-MM-dd HH:mm:ss\',
        onpicked:function(dp){
        if(ed.value == null|| ed.value==\'\'){
            //changeDate做時間加一天的處理，此處不寫了。。。
            ed.value=changeDate(dat);
        }
        //此處最好聯(lián)動的調(diào)用結(jié)束時間的控件，由于My97點(diǎn)擊控件時需按兩下才能選中，
        //如果不調(diào)的話，日歷不消失。
        ed.focus();
        })" />
<input id="endTime" class="Wdate" onfocus="
        WdatePicker(
            {dateFmt:\'yyyy-MM-dd HH:mm:ss\',
            realFmt:\'yyyy-MM-dd HH:mm:ss\',
            minDate:\'#F{$dp.$D(stTime)}\'})" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

其中 onpicked后的函數(shù)可單獨(dú)提出寫。

總結(jié)：以上僅是常用的部分，其他有需要可自行要官網(wǎng)仔細(xì)閱讀哦！該控件功能很強(qiáng)大，可利用js正則等寫出很多限制，只有想不到，有沒有做不到還不清楚~

針對最后一個，如果有更好的方式，還請一起交流學(xué)習(xí)！