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 5fae8f6f96c59ed1;}.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程序设计有所帮助。