javascript实现的淘宝旅行通用日历组件用法实例
更新时间：2015年08月03日 09:42:58 作者：Ferris
这篇文章主要介绍了javascript实现的淘宝旅行通用日历组件,以实例形式分析了该日历组件的相关设置及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章
相信很多人都遇到过敏感信息需要做部分隐藏功能，大多数都是用特殊符号去替换。今天小编给大家带来了JS实现用特殊符号替换字符串的中间部分区域的实例代码，需要的朋友参考下吧2018-07-07
本篇文章主要介绍了浅谈es6 javascript的map数据结构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要给大家介绍了关于javascript实现搜索筛选功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
在编写web软件时，遇到一些可以共用js的情况，于是就想着如何封装js代码。基本需求很简单，其实就是根据不同的情况封装js代码2013-07-07
这篇文章主要介绍了微信小程序使用canvas的画图操作,结合实例形式较为详细的分析了微信小城序基于canvas的画图操作相关实现技巧与操作注意事项,需要的朋友可以参考下2019-01-01
这篇文章主要给大家介绍了关于如何通过setTimeout理解JS运行机制的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
第一种是使用document.write/writeln(）方式，第二种使用jQuery，第三种是使用原生js方法，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要介绍了js实现仿爱微网两级导航菜单效果代码,通过javascript自定义函数结合鼠标点击事件实现tab切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了uni-app web-view的使用，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了微信小程序实现圆心进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
最新评论