WdatePicker文本框显示当前日期和时间限制

时间：2022-05-21 11:01:02

My97DatePicker是很不错的一个日期选择插件，体积只有几十k但是功能非常强大。官网：http://www.my97.net/

能满足很多苛刻的要求。

WdatePicker文本框显示当前日期-实现的结果：

WdatePicker文本框显示当前日期和时间限制<My97DatePicker两个日期范围不超过30天，第一个小于第二个，都不大于当前日期 >

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" />

效果：

WdatePicker文本框显示当前日期和时间限制<My97DatePicker两个日期范围不超过30天，第一个小于第二个，都不大于当前日期 >

3、My97DatePicker两个日期范围不超过30天，第一个小于第二个，都不大于当前日期。

My97DatePicker　如果两个输入框，第一个不大于第二个，都不大于当前日期，两个输入框之间的时间不超过30天。做法。

如果第二个直接设置比第一个大的范围不超过30天，那么遇到算出来的日期大于当前日期的情况，就会发生第二个输入框可以选择到今天之后的日期。所以要动态地修改第二个输入范围。
1.设置第一个不大于第二个，不大于当前日期。　最小为第二个日期减去30天。　并为其设置选中和清空时的事件（用于对第二个输入框进行控制）
2.第二个的规则用函数表示。　设置最大值为一个全局变量。　通过第一个的两个事件来修改这个全局变量。　

效果：

WdatePicker文本框显示当前日期和时间限制<My97DatePicker两个日期范围不超过30天，第一个小于第二个，都不大于当前日期 >

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'----设置皮肤
相关文章