素材网 素材网

jQuery制作简洁漂亮日期日历控件包含多选日期等

下载资源()次

阅读次数()次

发布时间:2014-02-23

jQuery制作简洁漂亮日期日历控件包含多选日期等
分享到:

用法简介:

来源:xw素材网

jQuery制作简洁漂亮日期日历控件包含多选日期等。

代码调用展示:

<script src="yui-min.js"></script>
<script>
YUI({
modules: {
	'trip-calendar': {
		fullpath: 'trip-calendar.js',
		type    : 'js',
		requires: ['trip-calendar-css']
	},
	'trip-calendar-css': {
		fullpath: 'trip-calendar.css',
		type    : 'css'
	}
}
}).use('trip-calendar', function(Y) {
/**
 * 非弹出式日历实例
 * 直接将日历插入到页面指定容器内
 */
var oCal = new Y.TripCalendar({
	container   : '#J_Calendar', //非弹出式日历时指定的容器(必选)
	selectedDate: new Date       //指定日历选择的日期
});
//日期点击事件
oCal.on('dateclick', function() {
	var selectedDate = this.get('selectedDate');
	alert(selectedDate + '\u3010' + this.getDateInfo(selectedDate) + '\u3011');
});
Y.one('#J_Example').delegate('click', function(e) {
	var oTarget = e.currentTarget;
		value   = oTarget.getAttribute('data-value');
	switch(true) {
		//日历个数
		case oTarget.hasClass('J_Count'):
			this.set('count', value).render();
			break;
		//显示节假日
		case oTarget.hasClass('J_showHoliday'):
			this.set('isHoliday', true).render();
			break;
		//隐藏节假日
		case oTarget.hasClass('J_hideHoliday'):
			this.set('isHoliday', false).render();
			break;
		//时间范围限定
		case oTarget.hasClass('J_Limit'):
			this.set('minDate', new Date)
				.set('maxDate', '')
				.set('afterDays', value)
				.set('date', new Date());
			break;
		//指定初始日期
		case oTarget.hasClass('J_InitDate'):
			this.set('minDate', value)
				.set('maxDate', '2012-12-21')
				.set('date', value);
			break;
		//下拉表单选择时间
		case oTarget.hasClass('J_Select'):
			this.set('isSelect', true).render();
			Y.all('.J_Count').slice(1).set('disabled', true);
			break;
		//取消下拉表单选择
		case oTarget.hasClass('J_SelectOff'):
			this.set('isSelect', false).render();
			Y.all('.J_Count').slice(1).set('disabled', false);
			break;
	}
}, 'button', oCal);
});


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。