WdatePicker文本框顯示當前日期和時間限制

    My97DatePicker是很不錯的一個日期選擇插件，體積只有幾十k但是功能非常強大。官網：http://www.my97.net/

能滿足很多苛刻的要求。

 

WdatePicker文本框顯示當前日期-實現的結果：

1、首先引入WdatePicker.js。

2、html代碼

<input id="setDate" class="Wdate" name="setDate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"   type="text" /></td>

 

3、加入一段JS代碼：

Date.prototype.format = function (format) {
          var args = {
              "M+": this.getMonth() + 1,
              "d+": this.getDate(),
              "h+": this.getHours(),
              "m+": this.getMinutes(),
              "s+": this.getSeconds(),
              "q+": Math.floor((this.getMonth() + 3) / 3), //quarter

              "S": this.getMilliseconds()
          };
          if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
          for (var i in args) {
              var n = args[i];
              if (new RegExp("(" + i + ")").test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));
          }
          return format;
      };

      $(function () {
          $("#setDate").val(new Date().format("yyyy-MM-dd"));

      });

 

 然后就OK了。

 

 

簡單的時間限制：

1、限制只能選擇今天的日期

onfocus="WdatePicker({startDate:'%y',dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-{%d-1}'})"

2、限制選擇今天之前的日期

<input id="setDate" class="Wdate" name="setDate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d'})"  style="padding:2px 5px;margin-left:10px;" type="text" />

效果：

 3、My97DatePicker兩個日期范圍不超過30天，第一個小於第二個，都不大於當前日期。

My97DatePicker　如果兩個輸入框，第一個不大於第二個，都不大於當前日期，兩個輸入框之間的時間不超過30天。做法。

 

如果第二個直接設置比第一個大的范圍不超過30天，那么遇到算出來的日期大於當前日期的情況，就會發生第二個輸入框可以選擇到今天之后的日期。所以要動態地修改第二個輸入范圍。

 

1.設置第一個不大於第二個，不大於當前日期。　最小為第二個日期減去30天。　並為其設置選中和清空時的事件（用於對第二個輸入框進行控制）

2.第二個的規則用函數表示。　設置最大值為一個全局變量。　通過第一個的兩個事件來修改這個全局變量。　

效果：

html code:

<label>日期：</label>

 <input type="text"  style="width:100px;" name="date1" id="datepicker1" size="24"   onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'datepicker2\')||\'new Date()\'}',minDate:'#F{$dp.$D(\'datepicker2\',{d:-30})}',onpicked:pickedFunc,oncleared:clearedFunc})  " value="" />
  <label>-</label>
  <input type="text" style="width:100px;" name="date2" id="datepicker2" size="24"  onfocus="picker2rule(this)" value="" />

js code<動態修改第二個日期選擇窗口的函數>

<script type="text/javascript">
        var md = new Date(); //第二個輸入框最大值的全局變量
        //第一個輸入框選擇好日期的時候操作
        function pickedFunc() {

            var Y = $dp.cal.getP('y'); //用內置方法獲取到選中的年月日
            var M = $dp.cal.getP('M');
            var D = $dp.cal.getP('d');
            M = parseInt(M, 10) - 1;
            D = parseInt(D, 10) + 30; //字符串的數字轉換成int再運算。並且如果超過30天，也能自動處理。
            var d = new Date()
            d.setFullYear(Y, M, D) //設置時間
            var nowDate = new Date();
            if (nowDate <= d) { //現在的時間比較，如果算出來的值大於現在時間，修改全局變量md為現在時間。
                md = nowDate;
            } else { //全局變量設置為算出來的值得 
                var month = d.getMonth() + 1; //月份的范圍是（0到11）;
                md = d.getFullYear() + "-" + month + "-" + d.getDate(); //直接把d給過去會有問題，所以拼成字符串發過去
            }
        }
        //第一個清空的時候的操作
        function clearedFunc() {
            md = new Date();
        }
        //給第二個輸入框定義規則
        function picker2rule(ele) {
            WdatePicker({ el: ele, minDate: '#F{$dp.$D(\'datepicker1\')}', maxDate: md })
        }
</script>

 

========================================================================================

 

參數的值

onfocus="WdatePicker({el:'id', maxDate:'#F{$dp.$D(\'datepicker2\')||\'new Date()\'}',minDate:'#F{$dp.$D(\'datepicker2\',{d:-1800})}',onpicked:pickedFunc,oncleared:clearedFunc})

el:'id'--將WdatePicker的值傳給id的標簽；

doubleCalendar:true----顯示雙日期

加上class="Wdate"-----在選擇框右邊顯示日期圖標

#F{}-----{}自定義js代碼

skin:'whyGreen'----設置皮膚