jQuery-UI 学习笔记(一) datepicker
1) 下载地址
http://jqueryui.com/download
2) HTML / JSP 写法
<html>
<head>
<base href="<%=basePath%>" />
<link type="text/css" href="css/overcast/jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<link type="text/css" href="css/me.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" src="js/me.js"></script>
<script type="text/javascript">
$(document).ready(function(){
init("<%=basePath%>");
});
</script>
<title>jquery-ui-datapick</title>
</head>
<body>
<h1>DatePicker</h1>
<input type="text" id="datepicker" name="birthday" />
</body>
</html>
2) JS 写法
$('#datepicker').datepicker({
inline: false,
disabled: false,
dateFormat: 'yy/mm/dd', // 设置日期格式
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
monthNames : ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort : ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
changeMonth: true, // 下拉框选择月份
changeYear: true, // 下拉框选择年份
yearRange: "1950:2020", // 下拉列表中年份范围
showOtherMonths: true, // 显示其他月份的日期
selectOtherMonths: false, // 允许选择其他月份的日期
showAnim: 'drop', // 动画效果风格
minDate: new Date(1950, 1-1, 1), // 本控件可以选的最小日期
maxDate: new Date(2020, 12-1, 31), // 本控件可以选的最大日期
showMonthAfterYear: true, // 是否在面板的头部年份后面显示月份
nextText: '一个月', // 更改按钮提示文本
prevText: '上一月', // 更改按钮提示文本
closeText: '关闭', // 更改按钮提示文本
currentText: '本月', // 更改按钮提示文本
showButtonPanel: true, // 显示按钮面板
buttonText: '日历', // 日历按钮提示文本
showOn: "button", // 日历按钮触发 ['focus', 'button', 'both'] 三选一
buttonImage: basePath + "/images/calendar.gif", // 日历按钮
buttonImageOnly: true // 按钮不显示文字
});
3) 最后看效果发现生成的日历DIV有点大，不怎么好看。修改一下CSS
jquery-ui-1.7.3.custom.css中
.ui-datepicker { width: 17em; padding: .2em .2em 0;}
修改一下字体大小
.ui-datepicker { width: 17em; padding: .2em .2em 0; font: 75% "Trebuchet MS", sans-serif;}