easyui限制日期范围

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

原创最新推荐文章于 2024-01-17 13:52:36 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui

easyui-文档专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在EasyUI环境中限制日期选择器的日期范围。通过调整HTML代码中的日期参数，可以设置允许用户选择的日期为当前日期之前或之后的特定天数。

今天在使用easyui的日期控件做指定范围的日期选择的时候，应客户的要求只能选择当前3天内的日期，这个功能不是很难，但是要是使用js来实现，那就要自己写js代码来判断，当然还可以在后台通过java来做，但这不是我要得效果，我要得效果是在控件上就锁定只能有特定要求的日期可以选择。这样的功能也是今天要实现的，其实已经实现了，在此记录一下。
1.先看一下效果

这里写图片描述
要实现效果前提是要引入easyui和jquery的相应js和样式。
2.html代码

<td width="42%">
    <input id="jobLogCTime"  name="jobLogCTime"  value="${pojo.jobLogCTime}" data-options="editable:false"  style="width:180px"  />
</td>

3.js代码

     //可以放到head部<script></script>里
     $(function(){
        $('#jobLogCTime').datebox().datebox('calendar').calendar({
            validator: function(date){
                var now = new Date();
                var d1 = new Date(now.getFullYear(), now.getMonth(),now.getDate()-2);
                var d2 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
                return d1<=date && date<=d2;
            }
        });
    });