本文實例講述了javascript實現的淘寶旅行通用日歷組件用法。分享給大家供大家參考。
在線演示：http://demo.jb51.net/js/2015/trip-calendar/demo.html
PS：下面的演示代碼，需要用到 trip-calendar.js與trip-calendar.css文件。打包下載地址
具體如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="angtian">
<meta name="description" content="淘寶旅行通用日歷組件Demo1">
<meta name ="keywords" content="日歷, 日歷組件, 淘寶旅行日歷">
<title>淘寶旅行通用日歷組件Demo1</title>
<style>
body{padding:0;margin:0 10px;text-align:center;}
.title{padding:0;margin:10px 0;font:700 18px/1.5 \5fae\8f6f\96c5\9ed1;}
.title a{font:400 14px/1.5 Tahoma;margin-left:20px;}
.example{margin-top:10px;}
.example button{margin:0 5px 10px 0;}
.calendar{display:inline-block;}
</style>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script>
var root = '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) {
/**
* 非彈出式日歷實例
* 直接將日歷插入到頁面指定容器內
*/
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);
});
</script>
</head>
<body>
<h1 class="title">淘寶旅行通用日歷組件Demo1 <a href="http://fgm.cc/learn/calendar/trip-calendar/Demo1.html">Demo1</a><a href="http://fgm.cc/learn/calendar/trip-calendar/Demo2.html">Demo2</a><a href="http://fgm.cc/learn/calendar/trip-calendar/Demo3.html">Demo3</a><a href="http://fgm.cc/learn/calendar/trip-calendar/api.html" target="_blank">API文檔</a></h1>
<div id="J_Example" class="example">
<button class="J_Count" data-value="1">單日歷</button>
<button class="J_Count" data-value="2">雙日歷</button>
<button class="J_Count" data-value="3">三日歷</button>
<button class="J_Count" data-value="4">四日歷</button>
<br />
<button class="J_showHoliday">顯示節假日</button>
<button class="J_hideHoliday">隱藏節假日</button>
<br />
<button class="J_Limit" data-value="90">限定范圍（今天->90天）</button>
<button class="J_InitDate" data-value="2012-10-01">指定初始日期（2012年10月）</button>
<button class="J_InitDate" data-value="">取消范圍限定</button>
<br />
<button class="J_Select">下拉表單選擇時間</button>
<button class="J_SelectOff">取消下拉表單選擇</button>
</div>
<div id="J_Calendar" class="calendar"></div>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。