時間選擇控制項

 
     

1 可以選擇任何日期<input id="txtDate" class="Wdate" type="text" onfocus="WdatePicker()" />2 今天以前的日期<input type="text" class="Wdate" onfocus="WdatePicker({maxDate:'%y-%M-#{%d}'})" />3 今天以後的日期<input type="text" class="Wdate" onfocus="WdatePicker({minDate:'%y-%M-#{%d}'})" />上面設定今天以前和今天以後的日期用到的是maxDate和minDate，%y-%M-#{%d} 表示的是當天的日期，如果想今天以前或是今天以後的日期不包括今天，設定運算式中的d減去1或是加上1即可，如下：<!--今天以前的日期不包括今天--><input type="text" class="Wdate"     onfocus="WdatePicker({maxDate:'%y-%M-#{%d-1}'})" /> <!--今天以後的日期不包括今天--><input type="text" class="Wdate"     onfocus="WdatePicker({minDate:'%y-%M-#{%d+1}'})" />4 同樣如果只能選擇今天設定maxDate和minDate都為今天就行，不過這個不常用到<input type="text" class="Wdate" onfocus="WdatePicker({maxDate:'%y-%M-#{%d}',minDate:'%y-%M-#{%d}'})" />5 兩個日期框，結束日期大於開始日期<input id="txtStartDate" type="text" class="Wdate"     onclick="WdatePicker({maxDate:'#F{$dp.$D(\'txtEndDate\',{d:-1})}'})" /><input id="txtEndDate" type="text" class="Wdate"     onclick="WdatePicker({minDate:'#F{$dp.$D(\'txtStartDate\',{d:1})}'})" />如果將結束日期框的onclick裡的{d:1} 改成{d:0}，就表示結束日期可以選擇和開始日期同一天6 今天以前或以後N天的日期<input type="text" class="Wdate"     onfocus="WdatePicker({maxDate:'%y-%M-#{%d}',    minDate:'%y-%M-#{%d-7}'})" /><!--選擇今天以後7天的日期--><input type="text" class="Wdate"     onfocus="WdatePicker({minDate:'%y-%M-#{%d}',    maxDate:'%y-%M-#{%d+7}'})" />7 兩個日期框，結束日期大於開始日期，並且都是今天以後的日期<input id="txtB" type="text"  class="Wdate"    onclick="WdatePicker({minDate:'%y-%M-#{%d}',    maxDate:'#F{$dp.$D(\'txtE\',{d:-1})}'})"/><input id="txtE" type="text"  class="Wdate"    onFocus="WdatePicker({minDate:'#F{$dp.$D(\'txtB\',{d:1})||    \'%y-%M-#{%d+2}\'}'})"/>8 兩個日期框，第一個選擇後觸發第二個彈出<input id="txtBegin" class="Wdate" type="text"     onfocus="var d5222=$dp.$('txtEnd');    WdatePicker({onpicked:function(){txtEnd.focus();},    maxDate:'#F{$dp.$D(\'txtEnd\')}'})" /><input id="txtEnd" class="Wdate" type="text"     onfocus="WdatePicker({minDate:'#F{$dp.$D(\'txtBegin\')}'})" />常用的日期範圍選擇先就總結這麼多，還有些的功能比如給文字框加個日曆小表徵圖、禁止文字框輸入、禁止日曆控制項清空等也是很常用的，代碼如下：<!--給文本加上class=Wdate 文字框的右邊就有日曆小表徵圖--><input class="Wdate" type="text" onfocus="WdatePicker()" /><!--禁止文字框輸入--><input class="Wdate" type="text" onfocus="WdatePicker({readOnly:true})" /><!--禁止文字框輸入--><input class="Wdate" type="text" onfocus="WdatePicker({isShowClear:false})" /> <!--當然幾種功能也能放到一起--><input class="Wdate" type="text"     onfocus="WdatePicker({readOnly:true,isShowClear:false})" />這裡只是列出了些常用的功能，要想瞭解更多還是去看官方文檔吧。至於日期範圍的選擇，看懂了那些代碼就可以很容易地根據需求變更了。註：上面又涉及到開始日期和結束日期兩個日期框的，文字框控制項必須要有id，這個id函數裡面會用到，如果您的開發中使用了Aspnet中的MasterPage，那麼文字框的id在產生頁面後會改變，類似於：ctl00_ContentPlaceHolder1_txtEndDate，如果還是用文字框本身的id是不會起作用的，我的做法是查看源檔案將產生的id複製到函數裡。

 

9、兩個時間框，前面時間小於後面時間，且都小於今天
     <input id="dateStart" type="text"  class="Wdate" name="dateStart"
     onFocus="WdatePicker({maxDate:'#F{$dp.$D(\'dateEnd\',{d:-1})||\'%y-%M-#\{%d}\'}'})"/>
       &nbsp;—&nbsp;
     <input id="dateEnd"  type="text" class="Wdate"  name="dateEnd"
     onFocus="WdatePicker({minDate:'#F{$dp.$D(\'dateStart\',{d:1})}',maxDate:'%y-%M-#\{%d}'})" />