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

最新推荐文章于 2024-10-11 11:28:48 发布

引路蜂

最新推荐文章于 2024-10-11 11:28:48 发布

阅读量3.1k

点赞数 3

分类专栏： jQuery JavaScript 教程 jQuery教程

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

JavaScript

49 篇文章

订阅专栏

jQuery

48 篇文章

订阅专栏

本文介绍如何使用 jQuery UI 的 Datepicker 控件自定义日期格式和语言设置，包括支持多种语言和格式化选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

格式化日期
可以通过日期格式重新定义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). */
 
   3jQuery(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});