jQuery 入门教程(32): jQuery UI Datepicker 示例（五）

无情阅读：671 2021-04-01 09:58:29 评论：0

设置可以选择的日期范围
有时希望用户在给定的日期内选择，比如预约会议的时间，只能在当天开始的一个月带10天以内。这时可以通过配置minDate和maxDate 来设置，如果minDate或maxDate 没有配置，表示没有最小日期或最大日期的限制。

 
        1 
         <!doctype html> 
       
        2 
         <html lang="en"> 
       
        3 
         <head> 
       
        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: "+1M +10D" 
       
        14 
                    }); 
       
        15 
                }); 
       
        16 
           </script> 
       
        17 
         </head> 
       
        18 
         <body> 
       
        19 
            
        20 
         <p>Date: <input type="text" id="datepicker" /></p> 
       
        21 
            
        22 
         </body> 
       
        23 
         </html>

可以看到小于当天的日期变灰且无法选择。

设置日期范围

可以使用两个DatePicker配合使用，用户可以选择一个开始日期和一个终止日期。

 
        1 
         <!doctype html> 
       
        2 
         <html lang="en"> 
       
        3 
         <head> 
       
        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: "+1w", 
       
        13 
                         changeMonth: true, 
       
        14 
                         numberOfMonths: 3, 
       
        15 
                         onClose: function (selectedDate) { 
           
        16 
                             $("#to").datepicker("option", "minDate", selectedDate); 
       
        17 
                         } 
       
        18 
                     }); 
       
        19 
                     $("#to").datepicker({ 
           
        20 
                         defaultDate: "+1w", 
       
        21 
                         changeMonth: true, 
       
        22 
                         numberOfMonths: 3, 
       
        23 
                         onClose: function (selectedDate) { 
           
        24 
                             $("#from").datepicker("option", "maxDate", selectedDate); 
       
        25 
                         } 
       
        26 
                     }); 
       
        27 
                 }); 
       
        28 
             </script> 
       
        29 
         </head> 
       
        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 
         </html>

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。