您的位置：首页 > Web前端 > JQuery

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

2014-01-15 12:57 531 查看


格式化日期

可以通过日期格式重新定义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"
 
/> 
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:
'<上月'
,
7
nextText:
'下月>'
,
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
});
只要把zh-TW 改成 zh-CN ,把其中的繁体“關閉”改成“关闭” 保存为 jquery.ui.datepicker-zh-CN.js,然后使用 zh-CN 作为区域选项即可。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航