淘宝旅行YUI通用日期日历控件

引用js文件调用方法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);});

在线演示        积分下载        6毛下载        砍两刀下载