javascript实现的淘宝旅行通用日历组件用法实例

2024-05-06 16:24:15

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了javascript实现的淘宝旅行通用日历组件,以实例形式分析了该日历组件的相关设置及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了javascript实现的淘宝旅行通用日历组件用法。分享给大家供大家参考。

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>