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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
javascript自执行函数
Feb 10 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
微信小程序实现聊天室功能
Jun 14 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文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
使用pdb模块调试Python程序实例
2015/06/02 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
Python之pymysql的使用小结
2019/07/01 Python
python向图片里添加文字
2019/11/26 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
python代码中怎么换行
2020/06/17 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
超市促销活动总结
2014/07/01 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
初中作文评语
2014/12/25 职场文书
责任书范本大全
2015/05/11 职场文书
教师节班会主持词
2015/07/06 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
你会写请假条吗?
2019/06/26 职场文书
python tqdm用法及实例详解
2021/06/16 Python
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript