jQuery UI Datepicker 应用举例

最新推荐文章于 2025-04-20 20:56:53 发布

hflwh

最新推荐文章于 2025-04-20 20:56:53 发布

阅读量101

点赞数

分类专栏：组件、工具文章标签： UI jQuery CSS JavaScript 脚本 ViewUI

组件、工具专栏收录该内容

17 篇文章

订阅专栏

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']);
});