easyui dropdown combobox two interlocking custom check date

//easyui地址列信息比较长, 可以加一个tittle悬浮提示的属性 return span即可
{ field: 'address', title: '所属地区', width: '12%', align: 'center' ,
       formatter: function (value, rowData, rowIndex){
       var add = rowData.address;
	   if (add.length>=15) {
		   var subStr = add.substring(0,15) + "...";
           return '<span title='+add+'>'+subStr+'</span>';
		}else{
		   return add;
	    }
}},

$('#provinceId').combobox('select', '330000'); //easyui将指定value的值被选中

easyui自定义验证,使开始日期 结束日期默认选中今天  且 结束日期之后的置为灰色不可选择(这样有一个红色不好看,最后我们对时间的判断还是使用弹框)

$(function () {
    //结束日期之后的置灰色不可选择
    $('#endDate').datebox().datebox('calendar').calendar({  //用来确定是否可以选择日历上的某一天，返回false将阻止选择某天
        validator : function(date){//结束日期
            var now = new Date();
            var d1 = new Date(now.getFullYear(),now.getMonth(),now.getDate());
            return d1 >= date; //这里改为大于(今天及今天以后的不可选中),而不是大于等于
        }
    });
    //开始日期和结束日期默认选择今天
    var now = new Date();
    var year = now.getFullYear();       //年
    var month = now.getMonth() + 1;     //月
    var day = now.getDate();            //日
    var clock = year + "-";
    if(month < 10) clock += "0";
    clock += month + "-";
    if(day < 10) clock += "0";
    clock += day
    $("#endDate").datebox("setValue",  ""+clock+"");
    $("#beginDate").datebox("setValue", ""+clock+"");//直接date.getMonth()是当前月份减去1
});

//自定义easyui验证 验证开始时间小于结束时间(在endDate的 easyui-datebox 加 validType="end")
$.extend($.fn.validatebox.defaults.rules, {
    end: {
        validator: function (value, param) {
            var startDate = $("#beginDate").val();
            var startTmp = new Date(startDate.replace(/-/g, "/"));
            var endTmp = new Date(value.replace(/-/g, "/"));
            return startTmp <= endTmp;
        },
        message: '结束时间要大于等于开始时间！'
    }
})

 

two drop-down box combobox linkage easyui 

<!--单位下拉框-->
<select class="easyui-combobox" name="deptName" id="deptId" label="单位：" 
                      labelPosition="left" data-options=""  style="width:20%">
	  <option value=''>--请选择单位--</option>
      <c:forEach items="${officeList}" var="dept" varStatus="status">
            <option value="${dept.id}">${dept.name}</option>
      </c:forEach>
</select>

<!--项目下拉框-->
<select class="easyui-combobox" name="projectName" id="projectId" label="项目：" 
                editable="false" labelPosition="left" data-options="" style="width:20%">
	<option value=''>--请选择项目--</option>
	<c:forEach items="${proList}" var="pro" varStatus="status">
		<option value="${pro.id}">${pro.proName}</option>
	</c:forEach>
</select>

//这里使用onChange替换onSelect,两者不同之处在于: 
// onChange事件用户点击(--请选择单位--)会触发(查询所有单位),
// onSelect事件在用户点击(--请选择单位--)不触发
$("#deptId").combobox({
    onChange: function () {
        // $("#projectId").combobox("setValue",'');//清空课程
        var id = $('#deptId').combobox('getValue');
        //如果id为''空串,则查询所有项目,当传入id有值,则查询挂在此单位下的项目
        $("#projectId").combobox({
            disabled: false,
            url: "${baseUrl}/attence/getProjectByDeptId.shtml?deptId=" + id,
            //从远程加载列表数据的 URL 
            valueField: 'id', //这里的id name就是返回的List<Map>中map的键和值
            textField: 'name'
        });
    }
});