jQuery 入门教程(30): jQuery UI Datepicker 示例（三）

java哥阅读：486 2021-04-01 09:58:39 评论：0

格式化日期
可以通过日期格式重新定义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 
                    $("#format").change(function () { 
          
       13 
                        $("#datepicker").datepicker("option", 
      
       14 
                            "dateFormat", $(this).val()); 
      
       15 
                    }); 
      
       16 
                }); 
      
       17 
            </script> 
      
       18 
        </head> 
      
       19 
        <body> 
      
       20 
          
       21 
            <p>Date: 
      
       22 
                <input type="text" id="datepicker" size="30" /></p> 
      
       23 
            <p> 
      
       24 
                Format options:<br /> 
      
       25 
                <select id="format"> 
      
       26 
                    <option value="mm/dd/yy">Default - mm/dd/yy</option> 
      
       27 
                    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> 
      
       28 
                    <option value="d M, y">Short - d M, y</option> 
      
       29 
                    <option value="d MM, y">Medium - d MM, y</option> 
      
       30 
                    <option value="DD, d MM, yy">Full - DD, d MM, yy</option> 
      
       31 
                    <option value="'day' d 'of' MM 'in the year' yy"> 
      
       32 
                        With text - 'day' d 'of' MM 'in the year' yy 
      
       33 
                    </option> 
      
       34 
                </select> 
      
       35 
            </p> 
      
       36 
        </body> 
      
       37 
        </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 src="scripts/jquery.ui.datepicker-ar.js"></script> 
      
       10 
            <script src="scripts/jquery.ui.datepicker-fr.js"></script> 
      
       11 
            <script src="scripts/jquery.ui.datepicker-he.js"></script> 
      
       12 
            <script src="scripts/jquery.ui.datepicker-zh-TW.js"></script> 
      
       13 
          
       14 
            <script> 
      
       15 
                $(function () { 
          
       16 
                    $.datepicker.setDefaults($.datepicker.regional[""]); 
      
       17 
                    $("#datepicker").datepicker($.datepicker.regional["fr"]); 
      
       18 
                    $("#locale").change(function () { 
          
       19 
                        $("#datepicker").datepicker("option", 
      
       20 
                          $.datepicker.regional[$(this).val()]); 
      
       21 
                    }); 
      
       22 
                }); 
      
       23 
            </script> 
      
       24 
        </head> 
      
       25 
        <body> 
      
       26 
            <p> 
      
       27 
                Date: 
      
       28 
                <input type="text" id="datepicker" />&nbsp; 
      
       29 
          <select id="locale"> 
      
       30 
              <option value="ar">Arabic (‫(لعربي</option> 
      
       31 
              <option value="zh-TW">Chinese Traditional (繁體中文)</option> 
      
       32 
              <option value="fr" selected="selected">French (Français)</option> 
      
       33 
              <option value="he">Hebrew (‫(עברית</option> 
      
       34 
          </select> 
      
       35 
            </p> 
      
       36 
        </body> 
      
       37 
        </html>

如果需要添加自定义的语言，比如简体中文，可以打开jquery.ui.datepicker-zh-TW.js 看看，

 
       1 
        /* Chinese initialisation for the jQuery UI date picker plugin. */ 
      
       2 
        /* Written by Ressol (ressol@gmail.com). */ 
      
       3 
        jQuery(function($){ 
          
       4 
            $.datepicker.regional['zh-TW'] = { 
          
       5 
                closeText: '關閉', 
      
       6 
                prevText: '&#x3C;上月', 
      
       7 
                nextText: '下月&#x3E;', 
      
       8 
                currentText: '今天', 
      
       9 
                monthNames: ['一月','二月','三月','四月','五月','六月', 
      
       10 
                '七月','八月','九月','十月','十一月','十二月'], 
      
       11 
                monthNamesShort: ['一月','二月','三月','四月','五月','六月', 
      
       12 
                '七月','八月','九月','十月','十一月','十二月'], 
      
       13 
                dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
      
       14 
                dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
      
       15 
                dayNamesMin: ['日','一','二','三','四','五','六'], 
      
       16 
                weekHeader: '周', 
      
       17 
                dateFormat: 'yy/mm/dd', 
      
       18 
                firstDay: 1, 
      
       19 
                isRTL: false, 
      
       20 
                showMonthAfterYear: true, 
      
       21 
                yearSuffix: '年'}; 
      
       22 
            $.datepicker.setDefaults($.datepicker.regional['zh-TW']); 
      
       23 
        });