jQuery-UI 学习笔记(一) datepicker

最新推荐文章于 2021-02-01 06:52:03 发布

Outaku

最新推荐文章于 2021-02-01 06:52:03 发布

阅读量116

点赞数

分类专栏： javascript / jquery 文章标签： jquery jqueryui datepicker ViewUI

javascript / jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery-UI 学习笔记(一) datepicker
[img]http://dl.iteye.com/upload/picture/pic/110543/fda74f16-6396-3bb8-9496-371eeecae557.png[/img]

1) 下载地址
[url]http://jqueryui.com/download[/url]

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;}

Outaku

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-UI 学习笔记(一) datepicker

jQuery-UI 学习笔记(一) datepicker[img]http://dl.iteye.com/upload/picture/pic/110543/fda74f16-6396-3bb8-9496-371eeecae557.png[/img]1) 下载地址[url]http://jqueryui.com/download[/url]2) HTML / JSP 写法...
复制链接

扫一扫