Set the date range that can be selected
Sometimes you want to select a date within the specified date, for example, the appointment time can only be within 10 days of the month starting on the current day. In this case, you can configure minDate and maxDate. If minDate or maxDate is not configured, there is no restriction on the minimum date or the maximum date.
1 <! Doctype html>
2
3
4 <meta charset = "UTF-8"/>
5 <title> jQuery UI Demos </title>
6 <link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css"/>
7 <script src = "scripts/jquery-1.9.1.js"> </script>
8 <script src = "scripts/jquery-ui-1.10.1.custom.js"> </script>
9 <script>
10 $ (function (){
11 $ ("# datepicker"). datepicker ({
12 minDate: 0,
13 maxDate: "+ 1 M + 10D"
14 });
15 });
16 </script>
17
18 <body>
19
20 <p> Date: <input type = "text" id = "datepicker"/> </p>
21
22 </body>
23
The date earlier than the current day is grayed out and cannot be selected.
Set date range
You can use two DatePicker nodes to select a start date and an end date.
1 <! Doctype html>
2
3
4 <meta charset = "UTF-8"/>
5 <title> jQuery UI Demos </title>
6 <link rel = "stylesheet" href = "themes/trontastic/jquery-ui.css"/>
7 <script src = "scripts/jquery-1.9.1.js"> </script>
8 <script src = "scripts/jquery-ui-1.10.1.custom.js"> </script>
9 <script>
10 $ (function (){
11 $ ("# from"). datepicker ({
12 defaultDate: "+ 1 w ",
13 changeMonth: true,
14 numberOfMonths: 3,
15 onClose: function (selectedDate ){
16 $ ("# to"). datepicker ("option", "minDate", selectedDate );
17}
18 });
19 $ ("# to"). datepicker ({
20 defaultDate: "+ 1 w ",
21 changeMonth: true,
22 numberOfMonths: 3,
23 onClose: function (selectedDate ){
24 $ ("# from"). datepicker ("option", "maxDate", selectedDate );
25}
26 });
27 });
28 </script>
29
30 <body>
31
32 <label for = "from"> From </label>
33 <input type = "text" id = "from" name = "from"/>
34 <label for = "to"> to </label>
35 <input type = "text" id = "to" name = "to"/>
36
37 </body>
38