jQuery下easyui-datebox日期区间控制开始和结束日期

直接上代码记录一下，方便以后使用。

HTML代码

<div class="layui-col-lg3 layui-col-md4 layui-col-sm6">
                    <input class="easyui-datebox" type="text" id="planValidDate" data-field="planValidDate" style="width:100%;"
                    data-options="label:'计划生效日期:',labelWidth:'124',labelAlign:'right',editable:false,required:true,onSelect:selectStartDate"/>
                </div>
                <div class="layui-col-lg3 layui-col-md4 layui-col-sm6">
                    <input class="easyui-datebox" type="text" id="planInvalidDate" data-field="planInvalidDate" style="width:100%;"
                    data-options="label:'计划失效日期:',labelWidth:'124',labelAlign:'right',editable:false,required:true,onSelect:selectStartDate"/>
                </div>

JS代码

<script>
    //当选择开始日期时限定结束日期的范围
    function selectStartDate(startDate) {
        //返回calendar会清空EndTime内容,需要保存下
        var tempEndDate = $('#planInvalidDate').datebox('getValue')
        $('#planInvalidDate').datebox().datebox('calendar').calendar({
            validator: function (endDate) {
                //限定日期选择范围
                return endDate >= startDate;
            }
        });
        //将EndTime写回去
        $('#planInvalidDate').datebox('setValue', tempEndDate);
    }
    //当选择结束日期时限定开始日期的范围
    function selectEndDate(endDate) {
        var tempStartDate = $('#planValidDate').datebox('getValue');
        $('#planValidDate').datebox().datebox('calendar').calendar({
            validator: function (startDate) {
                return startDate <= endDate;
            }
        });
        $('#planValidDate').datebox('setValue', tempStartDate);
    }
</script>

参考：

http://www.mamicode.com/info-detail-1234226.html

还有另一种写法，没有尝试，有兴趣的可以自己去尝试，

https://my.oschina.net/u/3192368/blog/873157