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

最新推荐文章于 2024-12-06 10:39:54 发布

iteye_19603

最新推荐文章于 2024-12-06 10:39:54 发布

阅读量137

点赞数

文章标签： ui javascript ViewUI

本文介绍如何通过jQuery UI插件自定义日期选择器的显示格式及语言设置，包括多种日期格式选项和本地化支持。

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

格式化日期
可以通过日期格式重新定义Datepicker显示日期时的格式。

   1<!doctype html>

<htmllang="en"> 

<head> 

<metacharset="utf-8"/> 

<title>jQuery UI Demos</title> 

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 

<scriptsrc="scripts/jquery-1.9.1.js"></script> 

<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 

<script> 

$(function () { 

$("#datepicker").datepicker(); 

$("#format").change(function () { 

$("#datepicker").datepicker("option", 

"dateFormat", $(this).val()); 

}); 

}); 

</script> 

</head> 

<body> 

   20

<p>Date: 

<inputtype="text"id="datepicker"size="30"/></p> 

<p> 

Format options:<br/> 

<selectid="format"> 

<optionvalue="mm/dd/yy">Default - mm/dd/yy</option> 

<optionvalue="yy-mm-dd">ISO 8601 - yy-mm-dd</option> 

<optionvalue="d M, y">Short - d M, y</option> 

<optionvalue="d MM, y">Medium - d MM, y</option> 

<optionvalue="DD, d MM, yy">Full - DD, d MM, yy</option> 

<optionvalue="'day' d 'of' MM 'in the year' yy"> 

With text - 'day' d 'of' MM 'in the year' yy 

</option> 

</select> 

</p> 

</body> 

</html>

本地化支持

Datepicker缺省使用英语显示，可以通过配置修改显示语言。
如果需要支持不同语言，可以添加，如：

   1<!doctype html>

<htmllang="en"> 

<head> 

<metacharset="utf-8"/> 

<title>jQuery UI Demos</title> 

<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 

<scriptsrc="scripts/jquery-1.9.1.js"></script> 

<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 

<scriptsrc="scripts/jquery.ui.datepicker-ar.js"></script> 

<scriptsrc="scripts/jquery.ui.datepicker-fr.js"></script> 

<scriptsrc="scripts/jquery.ui.datepicker-he.js"></script> 

<scriptsrc="scripts/jquery.ui.datepicker-zh-TW.js"></script> 

   13

<script> 

$(function () { 

$.datepicker.setDefaults($.datepicker.regional[""]); 

$("#datepicker").datepicker($.datepicker.regional["fr"]); 

$("#locale").change(function () { 

$("#datepicker").datepicker("option", 

$.datepicker.regional[$(this).val()]); 

}); 

}); 

</script> 

</head> 

<body> 

<p> 

Date: 

<inputtype="text"id="datepicker"/>&nbsp; 

<selectid="locale"> 

<optionvalue="ar">Arabic (‫(لعربي</option> 

<optionvalue="zh-TW">Chinese Traditional (繁體中文)</option> 

<optionvalue="fr"selected="selected">French (Français)</option> 

<optionvalue="he">Hebrew (‫(עברית</option> 

</select> 

</p> 

</body> 

</html>

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

   1/* Chinese initialisation for the jQuery UI date picker plugin. */

   2/* Written by Ressol (ressol@gmail.com). */

jQuery(function($){ 

$.datepicker.regional['zh-TW'] = { 

closeText:'關閉', 

prevText:'&#x3C;上月', 

nextText:'下月&#x3E;', 

currentText:'今天', 

monthNames: ['一月','二月','三月','四月','五月','六月', 

'七月','八月','九月','十月','十一月','十二月'], 

monthNamesShort: ['一月','二月','三月','四月','五月','六月', 

'七月','八月','九月','十月','十一月','十二月'], 

dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 

dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 

dayNamesMin: ['日','一','二','三','四','五','六'], 

weekHeader:'周', 

dateFormat:'yy/mm/dd', 

firstDay: 1, 

isRTL:false, 

showMonthAfterYear:true, 

yearSuffix:'年'}; 

$.datepicker.setDefaults($.datepicker.regional['zh-TW']); 

   23});