jQuery UI Datepicker 应用举例

forestkqq

浏览: 210016 次
性别:
来自: 合肥

最近访客更多访客>>

ningxianti

ljr1982

yzj150

simbazou

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

组件、工具

UI jQuery CSS JavaScript 脚本

jQuery UI Datepicker 样例

界面效果：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>日期选择</title>

<script type="text/javascript" src="../public/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../public/jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"></script>
<link type="text/css" href="../public/jquery-ui-1.7.2.custom/css/redmond/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

<!-- date picker 本地化 -->
<script type='text/javascript' src='../public/jquery-ui-1.7.2.custom/js/ui.datepicker-zh-CN.js'></script>
<link type="text/css" href="../public/jquery-ui-1.7.2.custom/css/pack_datepicker.css" rel="stylesheet" />


<script type="text/javascript">
$(function(){
	$("#sponsorDate").datepicker({
		changeMonth: true, changeYear: true,
		showOn: 'button', 
		buttonImage: 'images/calendar.gif', 
		buttonImageOnly: true,
                minDate: '-2y', maxDate: '+2y'
	});
	$('#sponsorDate').datepicker('option', {dateFormat: "yy/mm/dd" });	
	
});
</script>

</head>

<body>
 <input name="sponsorDate" type="text" id="sponsorDate" value="<% = SponsorDate %>" size="50" maxlength="50" >
</body>
</html>

pack_datepicker.css 是一个修正样式。使用默认的样式，在使用国际化同时启用changeYear和changeMonth后，年份和月份两个select显示为两行，很不好看。

.ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; } 
.ui-datepicker select.ui-datepicker-month-year {width: 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 40%;} 
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; } 

/* 控制字体大小  
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {font-size:1.2em}
*/

ui.datepicker-zh-CN.js 汉化脚本：

jQuery(function($){
	$.datepicker.regional['zh-CN'] = {
		closeText: '关闭',
		prevText: '&#x3c;上月',
		nextText: '下月&#x3e;',
		currentText: '今天',
		monthNames: ['01月','02月','03月','04月','05月','06月', '07月','08月','09月','10月','11月','12月'],
		monthNamesShort: ['01月','02月','03月','04月','05月','06月', '07月','08月','09月','10月','11月','12月'],
		dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
		dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
		dayNamesMin: ['日','一','二','三','四','五','六'],
		dateFormat: 'yy/mm/dd', firstDay: 1,
		isRTL: false};
	$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});

查看图片附件

2
顶

0
踩

分享到：

jqGrid 问题笔记(1) | jQuery Dialog 笔记

2010-01-05 14:26
浏览 10346
评论(7)
分类:Web前端
查看更多

7 楼 forestkqq 2011-11-14

duooluu 写道

请教一下，能选择时分秒吗？

不行啊

6 楼 duooluu 2011-11-11

请教一下，能选择时分秒吗？

5 楼 lls17 2011-03-25

要是把jar包附上就好了

4 楼 atgoingguoat 2010-12-23

不能选择时分秒.

3 楼 forestkqq 2010-08-25

UI 网站 http://jqueryui.com/themeroller/ , 页面左边有三个标签：roll your own, Gallery 和 Help ，选择 Gallery，就能看到十几个日历样式了。尽情享用吧。

2 楼 spiritfrog 2010-08-20

哦，说错了，应该是css

1 楼 spiritfrog 2010-08-20

你的这个日历图片是哪里来的？比默认的好看

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论