jQuery 入门教程(28): jQuery UI Datepicker 示例（一）

无情阅读：632 2021-04-01 09:58:51 评论：0

jQuery UI提供的Datepicker 是一个有着非常灵活配置的选择日期的UI组件，你可以配置显示日期的格式，语言，限制所能选择的日期范围，添加按钮等。

基本用法如下：

 
       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 
            }); 
      
       13 
          </script> 
      
       14 
        </head> 
      
       15 
        <body> 
      
       16 
           
       17 
        <p>Date: <input type="text" id="datepicker" /></p> 
      
       18 
         </body> 
      
       19 
        </html>

只需要给选择的HTML元素调用其构造函数即可。

使用动画效果
显示和隐藏DatePicker组件支持配置使用不同的动画效果，下列使用一个列表框来选择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 
                    $("#datepicker").datepicker(); 
      
       12 
                    $("#anim").change(function () { 
          
       13 
                        $("#datepicker").datepicker("option", 
      
       14 
                            "showAnim", $(this).val()); 
      
       15 
                    }); 
      
       16 
                }); 
      
       17 
            </script> 
      
       18 
        </head> 
      
       19 
        <body> 
      
       20 
          
       21 
            <p>Date: 
      
       22 
                <input type="text" id="datepicker" size="30" /></p> 
      
       23 
          
       24 
            <p> 
      
       25 
                Animations:<br /> 
      
       26 
                <select id="anim"> 
      
       27 
                    <option value="show">Show (default)</option> 
      
       28 
                    <option value="slideDown">Slide down</option> 
      
       29 
                    <option value="fadeIn">Fade in</option> 
      
       30 
                    <option value="blind">Blind (UI Effect)</option> 
      
       31 
                    <option value="bounce">Bounce (UI Effect)</option> 
      
       32 
                    <option value="clip">Clip (UI Effect)</option> 
      
       33 
                    <option value="drop">Drop (UI Effect)</option> 
      
       34 
                    <option value="fold">Fold (UI Effect)</option> 
      
       35 
                    <option value="slide">Slide (UI Effect)</option> 
      
       36 
                    <option value="">None</option> 
      
       37 
                </select> 
      
       38 
            </p> 
      
       39 
          
       40 
          
       41 
        </body> 
      
       42 
        </html>

标签:jquery

声明

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