有時(shí)希望用戶在給定的日期內(nèi)選擇，比如預(yù)約會議的時(shí)間，只能在當(dāng)天開始的一個(gè)月帶10天以內(nèi)。這時(shí)可以通過配置 minDate 和 maxDate 來設(shè)置，如果 minDate 或 maxDate 沒有配置，表示沒有最小日期或最大日期的限制。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
   <script>
       $(function () {
           $("#datepicker").datepicker({
               minDate: 0,
               maxDate: "+1M +10D"
           });
       });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" /></p>

</body>
</html>

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/39.png" alt="" />

可以看到小于當(dāng)天的日期變灰且無法選擇。

設(shè)置日期范圍

可以使用兩個(gè) DatePicker 配合使用，用戶可以選擇一個(gè)開始日期和一個(gè)終止日期。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#from").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                onClose: function (selectedDate) {
                    $("#to").datepicker("option", "minDate", selectedDate);
                }
            });
            $("#to").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                onClose: function (selectedDate) {
                    $("#from").datepicker("option", "maxDate", selectedDate);
                }
            });
        });
    </script>
</head>
<body>

    <label for="from">From</label>
    <input type="text" id="from" name="from" />
    <label for="to">to</label>
    <input type="text" id="to" name="to" />

</body>
</html>

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/40.png" alt="" />

上一篇：基本語法下一篇：jQuery UI Datepicker 示例（三）

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

jQuery UI Datepicker 示例（五）

設(shè)置可以選擇的日期范圍

設(shè)置日期范圍