`

jQuery-UI 学习笔记(一) datepicker

阅读更多
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;}
分享到:
评论
3 楼 wf_chn 2012-09-06  
datepicker的js在ui包里?
2 楼 yingzhor 2012-09-06  
呵呵。 兄弟是你啊。 谢谢啦。
最近忙吗?
1 楼 欣水寓言 2012-09-06  
官方ui中有i18n包的,其中有jquery.ui.datepicker-zh-CN.js文件的,不需要自己特别翻译的

如下代码
jQuery(function($){
	$.datepicker.regional['zh-CN'] = {
		closeText: '关闭',
		prevText: '&#x3c;上月',
		nextText: '下月&#x3e;',
		currentText: '今天',
		monthNames: ['一月','二月','三月','四月','五月','六月',
		'七月','八月','九月','十月','十一月','十二月'],
		monthNamesShort: ['一','二','三','四','五','六',
		'七','八','九','十','十一','十二'],
		dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
		dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
		dayNamesMin: ['日','一','二','三','四','五','六'],
		weekHeader: '周',
		dateFormat: 'yy-mm-dd',
		firstDay: 1,
		isRTL: false,
		showMonthAfterYear: true,
		yearSuffix: '年'};
	$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});

相关推荐

    jquery-ui-datepicker中文版

    &lt;script src="js/jquery.ui.datepicker-zh-CN.js"&gt;&lt;/script&gt; 去掉该行,全英文。格式也好了很多! 期待后续的高手修改 该资源来自于网上一哥们 &lt;script type="text/javascript" src="js/jquery-ui-timepicker-addon...

    jquery-ui-1.11.2日期控件datepicker

    ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.css" &gt; ${ctx}/plugins/jquery-ui-1.11.2/external/jquery/jquery.js"&gt; ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui.js"&gt; ${ctx}/plugins/jquery-ui-1.11.2/jquery-ui-...

    修改Jquery-UI-DatePicker-可以选择时间

    &lt;script src="js/jquery.ui.datepicker-zh-CN.js"&gt;&lt;/script&gt; 去掉此行,样式好很多。中文版的版式需要高手完善 来自于网上一高手 &lt;script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"&gt; jquery-...

    jquery-ui-1.10.3.custom.rar jquery 日期插件 带时间选择

    jquery-ui-1.10.3.custom.rar jquery 日期插件 带时间选择

    jquery-ui-datepicker加入时分秒 jquery.easyui时分秒

    源码修改!绝对原创!不粘贴复制!实现日期时间框,支持中文格式!...扩展了jquery-ui-datepicker的功能。在jquery easyui datetimebox 基础上汉化,并且添加一种jquery方式调用。强化了my97的onclick事件。

    jquery-ui-timepicker-addon

    jQuery UI Datepicker日期选择插件很好用,但是不满意的是不能精确到时分秒,而jquery-ui-timepicker-addon.js正是基于jQuery UI Datepicker的一款可选时间的插件。 使用方法: 1.把下载的文件包含到页面里面 2....

    jquery-ui-1.10.3.custom.zip

    ( jquery-ui-1.10.3.custom.zip

    jquery-ui-datepicker

    jquery-ui-datepicker 实现很多效果

    jquery-ui-1.8.17,包含datepicker插件

    jQuery UI是以jQuery为基础的开源JavaScript网页用户界面代码库。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome。

    jquery-ui-1.10.4.custom.zip

    jquery-ui,jquery, 必做要使用jQuery1.6+ 及以上 jQuery UI组件构成 jQuery UI 主要分为3个部分:交互、微件和效果库。 交互(Interactions) 交互部件是一些与鼠标交互相关的内容,包括缩放(Resizable) , 拖动...

    jquery.ui.datepicker.js

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。

    前端项目-jquery-ui-timepicker-addon.zip

    前端项目-jquery-ui-timepicker-addon,TimePicker插件将TimePicker添加到jQueryUI日期选取器中,因此使用任何一个日期选取器和滑块组件(jQueryUI)都是必需的。此外,所有datepicker选项仍然可以通过TimePicker插件...

    jquery.ui.datepicker-zh-CN.js

    jquery-ui中文日历控件,使用的时候记得先把文档编码改为UTF-8,否则中文显示乱码!

    jQuery-Mobile-Themed-DatePicker

    jQuery-Mobile DatePicker 日期 日历 demo

    jQuery ui-datepicker最好用的日历控件

    这个日历控件是目前最好用的jQuery日历控件,里面有Demo,只需导入JS文件,在页面上调用控件方法就可以轻松实现日历控件。

    jQuery ui Datepicker日期插件

    jquery的日期插件Datepicker,这两天正好研究完了,将研究结果分享下,单独的封装汉化版本,都有注释,好修改也好使用,注意保持images里面图片的名称和路径,red-datepicker.css可以定义日期div的样式,我自己在源...

    jquery-ui-1.8.2

    jquery-ui-1.8.2 Selectable 和 Sortable ;Accordion、Autocomplete、Button 、Datepicker 和 Slider,tabs等一些类框架

Global site tag (gtag.js) - Google Analytics