datebox时间框 HTML页面引用
日期范围:<input id="idQotDateFrom" type="text" name="qotDateFrom" class="easyui-datebox" editable="false"/>
<span class="date-separator"></span>
<input id="idQotDateTo" type="text" name="qotDateTo" class="easyui-datebox" editable="false"/>
JS属性设置 databox的属性设置继承了vaildatebox、combo、calendar的属性
$('#idQotDateFrom').datebox({
required: true,//设置时间框为必填
});
$('#idQotDateTo').datebox({
required: true,
});
设置一进入页面时,时间框显示的日期是当天的日期
toolProfit = {
formatter:function(date,type) {
var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : "0"+ (date.getMonth() + 1);
if(type=='dateFrom'){
return date.getFullYear() + '-' + month + day;
}
if(type=='dateTo'){
return date.getFullYear() + '-' + month + '-' + day;
}
},
});
$('#idQotDateFrom').datebox('setValue',toolProfit.formatter(new Date(),"dateFrom"));
$('#idQotDateTo').datebox('setValue',toolProfit.formatter(new Date(),"dateTo"));
两个datebox日期框共享日历
日期范围:<input id="idQotDateFrom" type="text" name="qotDateFrom" class="easyui-datebox" editable="false" sharedCalendar="#idCalendar"/>
<span class="date-separator"></span>
<input id="idQotDateTo" type="text" name="qotDateTo" class="easyui-datebox" editable="false" sharedCalendar="#idCalendar"/>
<span class="datagrid-tool-separator"></span>
<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="toolProfit.reload();">查找</a>
</form>
<div id="idCalendar" class="easyui-calendar"></div>
在JS文件中设置日历的属性和方法,两个日期框实现无法选择明天及以后的日期
$('#idCalendar').calendar({
validator: function(date){
var now = new Date();
var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
return date<=d1;
}
});