脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript实现的淘宝旅行通用日历组件

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实现简单的焦点图效果实例

    原生js实现简单的焦点图效果实例

    下面小编就为大家分享一篇原生js实现简单的焦点图效果实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 简单的前端js+ajax 购物车框架(入门篇)

    简单的前端js+ajax 购物车框架(入门篇)

    其实，一直想把自己写的一些js给总结下，也许是能力有限不能把它完美结合起来。只能自己默默的看着哪些代码，无能为力
    2011-10-10
  • JS简单实现移动端日历功能示例

    JS简单实现移动端日历功能示例

    这篇文章主要介绍了JS简单实现移动端日历功能的方法,涉及javascript针对日期与时间的操作及显示相关技巧,需要的朋友可以参考下
    2016-12-12
  • Webpack之tree-starking 解析

    Webpack之tree-starking 解析

    这篇文章主要介绍了Webpack之tree-starking 解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 微信小程序之导航滑块视图容器功能的实现代码(简单两步)

    微信小程序之导航滑块视图容器功能的实现代码(简单两步)

    这篇文章主要介绍了微信小程序之导航滑块视图容器功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • js中symbol类型以及symbol的三大应用场景详解

    js中symbol类型以及symbol的三大应用场景详解

    Symbol是ES6新推出的一种基本类型,它表示独一无二的值,它可以接受一个字符串作为参数,带有相同参数的两个Symbol值不相等,这个参数只是表示Symbol值的描述而已,下面这篇文章主要给大家介绍了关于js中symbol类型以及symbol的三大应用场景,需要的朋友可以参考下
    2022-09-09
  • JS获取短信验证码倒计时的实现代码

    JS获取短信验证码倒计时的实现代码

    这篇文章主要介绍了JS获取短信验证码倒计时的实现代码,需要的朋友可以参考下
    2017-05-05
  • JavaScript原生对象之String对象的属性和方法详解

    JavaScript原生对象之String对象的属性和方法详解

    这篇文章主要介绍了JavaScript原生对象之String对象的属性和方法详解,本文讲解了length、charAt()、charCodeAt()、concat()、indexOf()、lastIndexOf()等方法属性,需要的朋友可以参考下
    2015-03-03
  • JavaScript 中的 this 简单规则

    JavaScript 中的 this 简单规则

    想要确定this里规则是什么，其实方法很简单，通过检查它的调用位置，在函数被调用的时候确定this，下面就跟随脚本之家小编一起通过本文学习吧
    2017-09-09
  • JavaScript通过极大极小值算法实现AI井字棋游戏

    JavaScript通过极大极小值算法实现AI井字棋游戏

    极小极大值搜索算法是一种零和算法，是用来最小化对手的利益，最大化自己的利益的算法。极小极大之搜索算法常用于棋类游戏等双方较量的游戏和程序，算是一种电脑AI算法。本文将介绍通过这个算法实现的一个井字棋游戏，需要的可以参考一下
    2021-12-12

最新评论