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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

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 id="淘宝旅行通用日历组件Demo-a-href-http-fgm-cc-learn-calendar-trip-calendar-Demo-html-Demo-a-a-href-http-fgm-cc-learn-calendar-trip-calendar-Demo-html-Demo-a-a-href-http-fgm-cc-learn-calendar-trip-calendar-Demo-html-Demo-a-a-href-http-fgm-cc-learn-calendar-trip-calendar-api-html-target-blank-API文档-a">淘宝旅行通用日历组件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程序设计有所帮助。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

See all articles