jquery UI学习笔记-知问前端之日历控件

最新推荐文章于 2024-07-31 16:50:55 发布

chenchudongsg

最新推荐文章于 2024-07-31 16:50:55 发布

阅读量1.8k

点赞数

分类专栏： jquery 文章标签：日历 jquery jquery ui

本文链接：https://blog.csdn.net/chenchudongsg/article/details/40508471

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先贴出效果图：

学习要点：
1.调用 datepicker()方法
2.修改 datepicker()样式
3.datepicker()方法的属性
4.datepicker()方法的事件

日历（datepicker）UI，可以让用户更加直观的、更加方便的输入日期，并且还考虑不
同国家的语言限制，包括汉语。
一．调用 datepicker()方法
$('#date').datepicker();
二．修改 datepicker()样式
日历 UI 的 header 背景和对话框 UI 的背景采用的是同一个 class，所以，在此之前已经
被修改。所以，这里无须再修改了。
//无须修改 ui 里的 CSS，直接用 style.css 替代掉

.ui-widget-header {
background:url(../img/ui_header_bg.png);
}
//修改当天日期的样式
.ui-datepicker-today .ui-state-highlight {
border:1px solid #eee;
color:#f60;
}
//修改选定日期的样式
.ui-datepicker-current-day .ui-state-active {
border:1px solid #eee;
color:#06f;
}

注意：其他修改方案类似。
三．datepicker()方法的属性
日历方法有两种形式：1.datepicker(options)，options 是以对象键值对的形式传参，每个
键值对表示一个选项； 2.datepicker('action', param)， action 是操作对话框方法的字符串， param
则是 options 的某个选项。
datepicker 国际化选项

属性默认值/类型说明
dateFormat mm/dd/yy/时间指定日历返回的日期格式。
dayNames 英文日期/数组以数组形式指定星期中的天的长格式。比如：Sunday、Monday 等。中文：星期日
dayNamesShort 英文日期/数组以数组形式指定星期中的天的短格式。比如：Sun、Mon 等。
dayNamesMin 英文日期/数组以数组形式指定星期中的天的最小格式。比如：Su、Mo 等。
monthNames 英文月份/数组以数组形式指定月份的长格式名称（January、February 等）。数组必须从January 开始。
monthNamesShort 英文月份/数组以数组形式指定月份的短格式名称（Jan、Feb 等）。数组必须从 January 开始。
altField 无/字符串为日期选择器指定一个<input>域
altFormat 无/字符串添加到<input>域的可选日期格式
appendText 无/字符串在日期选择器的<input>域后面附加文本
showWeek false/布尔值显示周weekHeader 'Wk'/字符串显示周的标题
firstDay 0/数值指定日历中的星期从星期几开始。0 表示星期日。

注意：默认情况下，日历显示为英文。如果你想使用中文日历，直接引入中文语言包即可。或者把中文语言包的几行代码整合到某个 js 文件里即可。

日期格式代码
代码说明
d 月份中的天，从 1 到 31
dd 月份中的天，从 01 到 31
o 年份中的天，从 1 到 366
oo 年份中的天，从 001 到 366
D 星期中的天的缩写名称（Mon、Tue 等）
DD 星期中的天的全写名称（Monday、Tuesday 等）
m 月份，从 1 到 12
mm 月份，从 01 到 12
M 月份的缩写名称（Jan、February 等）
MM 月份的全写名称（January、February 等）
y 两位数字的年份（14 表示 2014）
yy 四位数字的年份（2014）
@ 从 01/01/1997 至今的毫秒数

$('#date').datepicker({
dateFormat : 'yy-mm-dd',
dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesMin : ['日','一','二','三','四','五','六'],
monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一
月','十二月'],
monthNamesShort : ['一','二','三','四','五','六','七','八','九','十','十一','十二'],
altField : '#abc',
altFormat : 'yy-mm-dd',
appendText : '(yy-mm-dd)',
firstDay : 1,
showWeek : true,
weekHeader : '周',
});

datepicker 外观选项
属性默认值/类型说明
disabled false/布尔值禁用日历
numberOfMonths 1/数值日历中同时显示的月份个数。默认为 1，如果设置 3 就同时显示 3 个月份。也可以设置数组：[3,2]，3 行 2 列共 6 个。
showOtherMonths false/布尔值如果设置为 true，当月中没有使用的单元格会显示填充，但无法使用。默认为 false，会隐藏无法使用的单元格。
selectOtherMonths false/布尔值如果设置为 true，表示可以选择上个月或下个月的日期。前提是 showOtherMonths设置为 true。
changeMonth false/布尔值如果设置为 true，显示快速选择月份的下拉列表。
changeYear false/布尔值如果设置为 true，显示快速选择年份的下来列表。
isRTL false/布尔值是否由右向左绘制日历。
autoSize false/布尔值是否自动调整控件大小，以适应当前的日期格式的输入
showOn 'focus'/字符串默认值为 focus，获取焦点触发，还有button 点击按钮触发和 both 任一事件发
生时触发。
buttonText '...'/字符串触发按钮上显示的文本
buttonImage 无/字符串图片按钮地址
buttonImageOnly false/布尔值设置为 true 则会使图片代替按钮
showButtonPanel false/布尔值开启显示按钮面板
closeText 'done'/字符串设置关闭按钮的文本
currentText 'Today'/字符串设置获取今日日期的按钮文本
nextText 'Next'/字符串设置下一月的 alt 文本
prevText 'Prev'/字符串设置上一月的 alt 文本
navigationAsDateFormat false/字符串设置 prev、next 和 current 的文字可以是format 的日期格式。
yearSuffix 无/字符串附加在年份后面的文本

showMonthAfterYear false/布尔值设置为 true，则将月份放置在年份之后

$('#date').datepicker({
disabled : true,
numberOfMonths : [3,2],
showOtherMonths : true,
selectOtherMonths : true,
changeMonth : true,
changeYear : true,
isRTL : true,
autoSize : true,
showButtonPanel: true,
closeText : '关闭',
currentText : '今天',
showMonthAfterYear: true,
});

datepicker 日期选择选项
属性默认值/类型说明
minDate 无/对象、字符串或数值日历中可以选择的最小日期
maxDate 无/对象、字符串或数值日历中可以选择的最大日期
defaultDate 当天/日期预设默认选定日期。没有指定，则是当天。
yearRange 无/日期设置下拉菜单年份的区间。比如： 1950:2020
hideIfNoPrevNext false/字符串设置为 true，如果上一月和下一月不存在，则隐藏按钮。

gotoCurrent false/布尔值如果为 true，点击今日且回车后选择的是当前选定的日期，而不是今日。

$('#date').datepicker({
yearRange: '1950:2020',
minDate : -10000,
maxDate : 0, //可以用 new Date(2007,1,1)
defaultDate : -1, //可以用'1m+3'
hideIfNoPrevNext : true,
gotoCurrent : false,
});

$('#date').datepicker({
yearRange: '1950:2020',
showAnim : false,
duration : 300,
});

四．datepicker()方法的事件
除了属性设置外，datepicker()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数。这些回调函数中的 this 值等于对话框内容的 div 对象，不是整个对话框的div。

datepicker 事件选项
事件名说明
beforeShow 日历显示之前会被调用。
beforeShowDay beforeShowDay(date)方法在显示日历中的每个日期时会被调用(date 参数是一个 Date 类对象)。该方法必须返回一个数组来指定每个日期的信息：
1.该日期是否可以被选择（数组的第一项，为true或false）
2.该日期单元格上使用的 CSS 类
3.该日期单元格上显示的字符串提示信息。
onChangeMonthYear onChangeMonthYear(year, month,inst)方法在日历中显示的月份或年份改变时会被调用。或changeMonth 或changeYear 为 true 时，下拉改变时也会触发。Year 当前的年，month 当年的月，inst 是一个对象，可以调用一些属性获取值。
onClose onClose(dateText, inst)方法在日历被关闭的时候调用。
dateText 是当时选中的日期字符串，inst 是一个对象，可以调用一些属性获取值。
onSelect onSelect(dateText, inst)方法在选择日历的日期时被调用。
dateText 是当时选中的日期字符串，inst 是一个对象，可以调用一些属性获取值。

$('#date').datepicker({
beforeShow : function () {
alert('日历显示之前触发！');
},
beforeShowDay : function (date) {
if (date.getDate() == 1) {
return [false,'a','不能选择'];
} else {
return [true];
}
},
onChangeMonthYear : function (year,month,inst) {
alert(year);
},
onClose : function (dateText,inst) {
alert(dateText);
},
onSelect : function (dateText,inst) {
alert(dateText);
}
});

注意：jQuery UI 只允许使用选项中定义的事件。目前还不可以试用 on()方法来管理。

datepicker('action', param)方法
方法返回值说明
datepicker('show') jQuery 对象显示日历
datepicker('hide') jQuery 对象隐藏日历
datepicker('getDate') jQuery 对象获取当前选定日历
datepicker('setDate',date) jQuery 对象设置当前选定日历
datepicker('destroy') jQuery 对象删除日历，直接阻断。
datepicker('widget') jQuery 对象获取日历的 jQuery 对象
datepicker('isDisabled') jQuery 对象获取日历是否禁用
datepicker('refresh') jQuery 对象刷新一下日历
datepicker('option', param) 一般值获取 options 属性的值
datepicker('option', param,value) jQuery 对象设置 options 属性的值

//显示日历
$('#date').datepicker('show');
//隐藏日历
$('#date').datepicker('hide');
//获取当前选定日期
alert($('#date').datepicker('getDate').getFullYear());
//设置当前选定日期
$('#date').datepicker('setDate', '2/15/2014');
//删除日历
$('#date').datepicker('destroy');
//获取日历的 jQuery 对象
$('#date').datepicker('widget');
//刷新日历
$('#date').datepicker('refresh');
//获取是否禁用日历
alert($('#date').datepicker('isDisabled'));
//获取属性的值
alert($('#date').datepicker('option', 'disabled'));
//设置属性的值
$('#date').datepicker('option', 'disabled', true);

下面是源代码，延续上一篇的实例。

index.html代码和style.css还是和上一篇的一样。

下面主要是index.js的代码发生了改变：

$(function(){
	$('#search_button').button();
	$('#reg').dialog({
		autoOpen:true,
		modal:true,
		resizable:false,
		width:320,
		height:340,
		buttons:{
			'提交':function(){
				
			}
		}
	});
	$('#reg').buttonset();
	$('#reg input[title]').tooltip({
		position : {
			my : 'left center',
			at : 'right+5 center'/*right加上5个像素*/
		},
	});
	$('#date').datepicker({
		dateFormat : 'yy-mm-dd',
		dayNames : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
		dayNamesShort : ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
		dayNamesMin : ['日','一','二','三','四','五','六'],
		monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
		monthNamesShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
		showButtonPanel : true,
		closeText : '关闭',
		currentText : '今天',
		nextText : '下个月',
		prevText : '上个月',
		changeMonth : true,
		changeYear :true,
		yearRange : '1950:2050',
	});
	var srcArray=['aaa@163.com', 'bbb@163.com', 'ccc@163.com'];
	$('#email').autocomplete({
		delay:0,
		autoFocus : true,
		source:function(request,response){
			 var hosts=['qq.com','163.com','126.com','gmail.com','hostmail.com'],
			 term=request.term,//获取输入的内容
			 name=term,
			 host='',			//域名
			 ix=name.indexOf('@'),//获取@的位置
			 result=[];			//结果
			 //结果第一条是自己输入
			result.push(term);
			 if(ix>-1){
				name=term.slice(0,ix);
				host=term.slice(ix+1);
			 }
			 if(name){
				//得到找到的域名
				var findedHosts=(host ? $.grep(hosts,function(value,index){
					return value.indexOf(host) > -1
				}):hosts),
				findedResults=$.map(findedHosts,function(value,index){
					return name+"@"+value;
				});
				result=result.concat(findedResults);
			 }
			 response(result);
		},
	});
});