设置easyUI的日历选择范围

来源：互联网发布：渗透理论复杂网络编辑：程序博客网时间：2024/06/05 21:55

在使用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>

效果如下：
这里写图片描述

当天之前的日期都是不能被选中的

0 0