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


Posted in Javascript onAugust 03, 2015

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

在线演示:http://demo.3water.com/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程序设计有所帮助。

Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 #Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 #Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 #Javascript
JavaScript图片轮播代码分享
Jul 31 #Javascript
简单实现异步编程promise模式
Jul 31 #Javascript
JavaScript数据类型判定的总结笔记
Jul 31 #Javascript
jquery代码实现多选、不同分享功能
Jul 31 #Javascript
You might like
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
学习python (2)
2006/10/31 Python
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Python中的元类编程入门指引
2015/04/15 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
sealed修饰符是干什么的
2012/10/23 面试题
一套Delphi的笔试题二
2013/05/11 面试题
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
实习单位评语
2014/04/26 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
民主生活会剖析材料
2014/09/30 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
用Java实现简单计算器功能
2021/07/21 Java/Android
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript