easyui-combobox控制datebox,通过option选项,控制日期的变化。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head th:fragment="htmlhead">
<meta charset="UTF-8"/>
<link th:href="@{/plugins/easyui/themes/default/easyui.css}" rel="stylesheet"/>
<link th:href="@{/plugins/easyui/themes/icon.css}" rel="stylesheet"/>
<script th:src="@{/plugins/easyui/jquery.min.js}"></script>
</head>
<body>
<div style="margin:20px 0;"></div>
<tr>
<td>状态:</td>
<!-- data-options="required:true"-->
<td colspan="3">
<select class="easyui-combobox" name="status" id="status" style="width:100px">
<option value="1" selected="selected">调休</option><option value="0">补班</option></select>
<!--//<input class="easyui-textbox" data-options="required:true,prompt:'一句话描述你做的功能内容,补充放在备注'" name="description" id="description" style="width:377px" />-->
</td>
</tr>
<input name="date" id="date"></input>
<!--<input id="xx"></input>-->
<script>
$(function(){
var obj=$("#status option:selected").val();
/*var obj = document.getElementById("status");*/
/*var selectValue = select.val();*/
/*alert(obj);*/
if(obj==1) {
$('#date').datebox().datebox('calendar').calendar({
validator: function (date) {
return date.getDay() != 6 && date.getDay() != 0;
}
});
}
});
$(function () {
$("#status").combobox({
onChange: function () {
//$('#status1').combobox('loadData', {});//清空option选项
//var status1=$("#status option:selected").val();
var status1 = $("#status").combobox("getValue");
alert(status1);
if(status1==1) {
$('#date').datebox().datebox('calendar').calendar({
validator: function (date) {
return date.getDay() != 6 && date.getDay() != 0;
$('#status').combobox('clear');//清空选中项
}
});
}else
{
$('#date').datebox().datebox('calendar').calendar({
validator: function (date) {
return date.getDay() != 1 && date.getDay() != 2
&& date.getDay() != 3 && date.getDay() != 4 && date.getDay() != 5;
$('#status').combobox('clear');//清空选中项
}
});
}
}
});
});
</script>
<script th:src="@{/plugins/easyui/jquery.min.js}"></script>
<script th:src="@{/plugins/easyui/jquery.easyui.min.js}"></script>
<script th:src="@{/plugins/easyui/locale/easyui-lang-zh_CN.js}"></script>
<script th:inline="javascript">
var path = /*[[@{/}]]*/'';
</script>
<script th:src="@{/js/common/common.js}"></script>
<script th:src="@{/js/common/sUtils.js}"></script>
</body>
</html>
下面是页面效果,如果选择下拉框是调休,就只能选择星期一到星期五的日期,星期六和星期日不能选择
如果选择补班,就是只能选择星期六和星期日,可以来做节假日管理,进行调休控制