设置easyUI的日历选择范围

最新推荐文章于 2024-04-15 09:31:50 发布

cily_undefined

最新推荐文章于 2024-04-15 09:31:50 发布

阅读量1.6k

点赞数

分类专栏： easyUI 文章标签： easyui 日历

本文链接：https://blog.csdn.net/qq_29326717/article/details/70739019

版权

easyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在使用easyUI的日历插件时，不加以设置的话日历上的每一天都可以选择，最近工作需要规定当天以前的日期是不能被选择~其实不难哦~我向来比较爽快，没那么多文字，直接上代码，不懂的可以问我，估计大家一看就懂，嘻嘻(^__^) 嘻嘻……

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设置日历选择范围</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.2/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.2/themes/icon.css"/>
    <style type="text/css">
        .calendarBox{
            width: 500px;
            height: 500px;
            background-color: #ccc;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="calendarBox">
        <div id="calendar"></div>
        <input id="dateBox" class="easyui-datebox" name="dateBox" required>
    </div>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript">
    $("#calendar").calendar({
        validator: function(date){
            var now = new Date();
            var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            return d1<=date;
        },
        current:new Date(),   
        onSelect: function(date){
            //alert(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate());
            if((date.getMonth()+1)<10){
                mTDate = date.getFullYear()+"-0"+(date.getMonth()+1)+"-"+date.getDate();
                alert(mTDate);
            }else{
                mTDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
                alert(mTDate);
            }
        }
    });
    //easyui-datebox
    $("#dateBox").datebox().datebox('calendar').calendar({
        validator: function(date){
            var now = new Date();
            var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            return d1<=date;
        }
    });
    $("#dateBox").datebox({
        onSelect: function(date){
            // alert(now.getFullYear(), now.getMonth(), now.getDate());
            alert(date);
        }
    }); 
    </script>
</body>
</html>