中国化的日期控件
用juery ui 实现的日期控件。
1.页面源码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>日期选择</title>
<script type="text/javascript" src="jquerylib/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="./jquerylib/js/jquery-ui-1.8.22.custom.min.js"></script>
<link type="text/css"
href="jquerylib/css/cupertino/jquery-ui-1.8.22.custom.css"
rel="stylesheet" />
<!-- date picker 本地化 -->
<script type='text/javascript'
src='jquerylib/development-bundle/ui/i18n/jquery.ui.datepicker-zh-CN.js'></script>
<link type="text/css" href="jquerylib/css/mydatepicker.css"
rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#sponsorDate").datepicker({
changeMonth : true,
changeYear : true,
showOn : 'button',
buttonImage : 'jquerylib/css/cupertino/images/clock.gif',
buttonImageOnly : true,
minDate : '-10y',
maxDate : '+10y'
});
$('#sponsorDate').datepicker('option', {
dateFormat : "yy-mm-dd"
});
$("#sponsorDate").datepicker("option", "showAnim", "slideDown");
});
</script>
</head>
<body>
<div align="center">
<input name="sponsorDate" type="text" id="sponsorDate"
value="SponsorDate" size="25" maxlength="25">
</div>
</body>
</html>
2. 自己修改的日期控件css文件mydatepicker.css
.ui-datepicker .ui-datepicker-title select {
font-size: 1em;
margin: 1px 1;
}
.ui-datepicker select.ui-datepicker-month-year {
width: 30%;
}
.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year
{
width: 30%;
}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
float: left;
}
/* 控制字体大小 */
.ui-datepicker-div,.ui-datepicker-inline,#ui-datepicker-div {
font-size: 0.7em;
}
3.效果图见附件