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

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

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

文章标签：

#ui #javascript #ViewUI

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

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