js设置easyUI的datebox时间选择范围

1、如何设置easyUI中的datebox时间选择范围呢?

如图,只能选择一定时间范围内的是时间。

页面的代码如下:

选择框

 <input type="text" id="start_time" name="start_time"  class="easyui-datebox" style="width:220px;height:26px"
 data-options="editable:false" onchange="judgeTime(event)" />

注意标签中的data-options="editable:false" 的作用是,防止用户删除选择框中的日期,只能进行选择。

另外, 获取到这个databox中的value的jquery方式如下: 

     var v = $('#start_time').datebox('getValue'); //报表日期,即用户选择的日期

控制时间范围的js

$(document).ready(function() {	 //页面一加载就执行
	//alert("页面一加载就就执行");
	// 这是只允许选择30天之内的日期
	//设置时间范围
	$('#start_time').datebox('calendar').calendar({
	    validator: function(date){
	        var now = new Date();
	     //   var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate()-30);
	        var d2 = new Date(now.getFullYear(), now.getMonth(), now.getDate()-1);
	    //    return d1<=date && date<=d2;  //设置时间区间,大于等于d1,小于等于d2.
	        return date<=d2;           //设置日期小于等于当前日期的前一天,用户只能选择当前日期之前的日期
	    }
	});
});	

补充:

2、如何设定默认选定的时间

js代码:

         function setTime(){   //设置时间函数
			var curDate = new Date();
			var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天
			var dateStr = myformatter(preDate);
			$("#start_time").datebox("setValue", dateStr);  //给datebox赋值,设置value,即默认选择
		}
		
 function myformatter(date){   //格式化时间函数
	        var y = date.getFullYear();  
	        var m = date.getMonth()+1;  
	       	var d = date.getDate();  
	        return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);  
	    } 

注意如何给datebox赋值的:$("#start_time").datebox("setValue", dateStr);

页面一加载就设定时间:

$(document).ready(function() {	
	//alert("页面一加载就就执行");
	setTime();  //先设置时间	
});	

猜你喜欢

转载自blog.csdn.net/RUIMENG061511332/article/details/80980631
今日推荐