javascript实现的淘宝旅行通用日历组件用法实例
本文实例讲述了javascript实现的淘宝旅行通用日历组件用法。分享给大家供大家参考。
在线演示：http://demo.jb51.net/js/2015/trip-calendar/demo.html
PS：下面的演示代码，需要用到trip-calendar.js与trip-calendar.css文件。打包下载地址
具体如下：
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<metaname="author"content="angtian">
<metaname="description"content="淘宝旅行通用日历组件Demo1">
<metaname="keywords"content="日历,日历组件,淘宝旅行日历">
<title>淘宝旅行通用日历组件Demo1</title>
<style>
body{padding:0;margin:010px;text-align:center;}
.title{padding:0;margin:10px0;font:70018px/1.5\5fae\8f6f\96c5\9ed1;}
.titlea{font:40014px/1.5Tahoma;margin-left:20px;}
.example{margin-top:10px;}
.examplebutton{margin:05px10px0;}
.calendar{display:inline-block;}
</style>
<scriptsrc="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script>
varroot='http://fgm.cc/learn/calendar/trip-calendar/';
YUI({
modules:{
'trip-calendar':{
fullpath:root+'trip-calendar.js',
type:'js',
requires:['trip-calendar-css']
},
'trip-calendar-css':{
fullpath:root+'trip-calendar.css',
type:'css'
}
}
}).use('trip-calendar',function(Y){
/**
*非弹出式日历实例
*直接将日历插入到页面指定容器内
*/
varoCal=newY.TripCalendar({
container:'#J_Calendar',//非弹出式日历时指定的容器（必选）
selectedDate:newDate//指定日历选择的日期
});
//日期点击事件
oCal.on('dateclick',function(){
varselectedDate=this.get('selectedDate');
alert(selectedDate+'\u3010'+this.getDateInfo(selectedDate)+'\u3011');
});
Y.one('#J_Example').delegate('click',function(e){
varoTarget=e.currentTarget;
value=oTarget.getAttribute('data-value');
switch(true){
//日历个数
caseoTarget.hasClass('J_Count'):
this.set('count',value).render();
break;
//显示节假日
caseoTarget.hasClass('J_showHoliday'):
this.set('isHoliday',true).render();
break;
//隐藏节假日
caseoTarget.hasClass('J_hideHoliday'):
this.set('isHoliday',false).render();
break;
//时间范围限定
caseoTarget.hasClass('J_Limit'):
this.set('minDate',newDate)
.set('maxDate','')
.set('afterDays',value)
.set('date',newDate());
break;
//指定初始日期
caseoTarget.hasClass('J_InitDate'):
this.set('minDate',value)
.set('maxDate','2012-12-21')
.set('date',value);
break;
//下拉表单选择时间
caseoTarget.hasClass('J_Select'):
this.set('isSelect',true).render();
Y.all('.J_Count').slice(1).set('disabled',true);
break;
//取消下拉表单选择
caseoTarget.hasClass('J_SelectOff'):
this.set('isSelect',false).render();
Y.all('.J_Count').slice(1).set('disabled',false);
break;
}
},'button',oCal);
});
</script>
</head>
<body>
<h1class="title">淘宝旅行通用日历组件Demo1<ahref="http://fgm.cc/learn/calendar/trip-calendar/Demo1.html">Demo1</a><ahref="http://fgm.cc/learn/calendar/trip-calendar/Demo2.html">Demo2</a><ahref="http://fgm.cc/learn/calendar/trip-calendar/Demo3.html">Demo3</a><ahref="http://fgm.cc/learn/calendar/trip-calendar/api.html"target="_blank">API文档</a></h1>
<divid="J_Example"class="example">
<buttonclass="J_Count"data-value="1">单日历</button>
<buttonclass="J_Count"data-value="2">双日历</button>
<buttonclass="J_Count"data-value="3">三日历</button>
<buttonclass="J_Count"data-value="4">四日历</button>
<br/>
<buttonclass="J_showHoliday">显示节假日</button>
<buttonclass="J_hideHoliday">隐藏节假日</button>
<br/>
<buttonclass="J_Limit"data-value="90">限定范围（今天->90天）</button>
<buttonclass="J_InitDate"data-value="2012-10-01">指定初始日期（2012年10月）</button>
<buttonclass="J_InitDate"data-value="">取消范围限定</button>
<br/>
<buttonclass="J_Select">下拉表单选择时间</button>
<buttonclass="J_SelectOff">取消下拉表单选择</button>
</div>
<divid="J_Calendar"class="calendar"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。