EasyUI datebox日期框使用

来源:互联网 发布:最新php漏洞 编辑:程序博客网 时间:2024/06/05 07:09

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;        }    });