easyui-combobox控制datebox，通过option选项，控制日期的变化。

最新推荐文章于 2024-01-17 13:52:36 发布

962721775y

最新推荐文章于 2024-01-17 13:52:36 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/A1229451567/article/details/82877848

版权

<!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>

下面是页面效果，如果选择下拉框是调休，就只能选择星期一到星期五的日期，星期六和星期日不能选择

如果选择补班，就是只能选择星期六和星期日，可以来做节假日管理，进行调休控制

962721775y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui-combobox控制datebox，通过option选项，控制日期的变化。

&lt;!DOCTYPE html&gt;&lt;html xmlns:th="http://www.thymeleaf.org" &gt;&lt;head th:fragment="htmlhead"&gt; &lt;meta charset="UTF-8"/&gt; &lt;link th:href="@{/plugins/easyui/th
复制链接

扫一扫