EasyUI datebox日期框使用

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

猜你喜欢

转载自blog.csdn.net/Datura_Elena/article/details/78432956
今日推荐