Home > Developer > JavaScript
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
