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(); //先设置时间
});