`

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.css、jquery-ui.js下载

    jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    **jQuery UI** 是一个强大的JavaScript库,用于构建用户界面,它基于流行的jQuery库。这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定...

    jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css

    1.8.2是这个版本的发布编号,表示它是在2010年左右发布的,当时jQuery UI已经包含了大量的组件,如对话框(Dialog)、拖放(Draggable)、可排序(Sortable)、日期选择器(Datepicker)等。 接下来,`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.2.custom

    jQuery UI 是一款基于 jQuery JavaScript 库的强大且灵活的用户界面库,它提供了一系列预先设计的组件,用于创建丰富的交互式网页应用。在这个主题中,我们将深入探讨的是 `jquery-ui-1.10.2.custom` 版本,这是一个...

    jquery-ui.min.js

    jQuery UI是基于JavaScript库jQuery的一款强大的用户界面插件集,它提供了丰富的交互效果、可自定义的主题以及多种可重用的UI小部件。在本文中,我们将深入探讨jQuery UI的核心功能,尤其是标题所提及的`jquery-ui....

    jquery-ui-1.7.3.custom 完整开发包

    `jQuery UI 1.7.3 Custom` 是一个流行的前端框架,主要用于构建交互式用户界面。这个完整开发包包含了创建高效、美观且响应式的网页应用所需的所有组件和资源。在这个压缩包中,我们可以找到以下几个关键部分,它们...

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

    `timepicker-addon`是一个扩展了jQuery UI datepicker的插件,它增加了对时间选择的支持。集成这个插件后,用户可以在同一个界面上同时选择日期和时间。 在实际项目中,我们可以这样配置日期时间选择器: ```...

    jquery.datepicker-zh-CN.js

    jquery datepicker 的中文包...&lt;link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"&gt; $( "#datepicker" ).datepicker({dateFormat:"yy-mm-dd",regional:$.datepicker.regional['zh-CN']});

    jquery-ui-1.10.0.custom.zip

    jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面库。它提供了多种交互控件、可拖动、可排序的元素、日期选择器、对话框、滑块、菜单等丰富的功能,极大地简化了网页的界面开发工作。在本文中,我们将...

    jquery-ui-1.10.4.custom

    这个名为 "jquery-ui-1.10.4.custom" 的压缩包文件,很显然是一个自定义版本的 jQuery UI,版本号为 1.10.4。在本文中,我们将深入探讨 jQuery UI 的核心功能、使用场景以及其自定义版本的特性。 ### jQuery UI 的...

    jquery-ui-1.11.4完整版

    jQuery UI 是一款基于JavaScript库jQuery的用户界面插件集合,提供了丰富的交互效果和可自定义的主题。本文将深入解析jQuery UI 1.11.4这个版本,涵盖其核心功能、组件、应用场景以及使用方法。 一、jQuery UI的...

    jquery-ui-1.8.6 js库

    1. **易用性**:jQuery UI 的 API 设计简洁,学习曲线平缓,开发者可以快速上手。 2. **兼容性**:jQuery UI 支持多种浏览器,包括 IE6+、Firefox、Chrome、Safari 和 Opera,确保广泛的应用场景。 3. **社区支持*...

    jquery-ui+jquery-ui-rails

    当我们将jQuery UI引入Rails项目时,通常会使用`jquery-ui-rails` gem,这是一个将jQuery UI与Rails集成的便捷工具。在这个案例中,我们看到`jquery-ui-rails-4.2.1.gem`,这是该gem的一个特定版本。这个gem负责将...

    jquery-ui-1.10.3.custom

    jQuery UI 是一个基于 jQuery 的开源库,提供了丰富的用户界面组件和交互功能。本篇将深入探讨如何使用 "jquery-ui-1.10.3.custom" 这一特定版本,帮助开发者更好地理解和应用UI组件。 首先,理解jQuery UI的核心...

    jquery-ui-1.11.1.custom (blue).zip jquery-UI蓝色主题包

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了一系列可交互的组件和可自定义的主题,大大简化了网页的界面设计工作。在这个“jquery-ui-1.11.1.custom (blue).zip”压缩包中,我们特别...

    jquery-ui-1.7.1.zip

    jQuery UI 包含了多个模块,每个模块都是一个独立的组件,如对话框(Dialog)、日期选择器(Datepicker)、拖放(Draggable)、可排序(Sortable)、可堆叠(Stackable)、可折叠(Collapsible)等。这些组件大大...

    jquery-ui-1.8.18.custom,jquery-ui-1.8.18.custom.min,jquery-1.7.1.min

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集,它提供了一系列可交互的组件,用于创建丰富的用户体验。在标题提及的 "jquery-ui-1.8.18.custom" 文件中,包含了完整的 jQuery UI 工具包,特别定制以...

Global site tag (gtag.js) - Google Analytics