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

这篇文章主要介绍了javascript实现的淘宝旅行通用日历组件,以实例形式分析了该日历组件的相关设置及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

PS：下面的演示代码，需要用到 trip-calendar.js与trip-calendar.css文件。打包下载地址

具体如下：

1. <!DOCTYPE HTML> 
2. <html> 
3. <head> 
4. <meta charset="utf-8"> 
5. <meta name="author" content="angtian"> 
6. <meta name="description" content="淘宝旅行通用日历组件Demo1"> 
7. <meta name ="keywords" content="日历, 日历组件, 淘宝旅行日历"> 
8. <title>淘宝旅行通用日历组件Demo1</title> 
9. <style> 
10. body{padding:0;margin:0 10px;text-align:center;} 
11. .title{padding:0;margin:10px 0;font:700 18px/1.5 /5fae/8f6f/96c5/9ed1;} 
12. .title a{font:400 14px/1.5 Tahoma;margin-left:20px;} 
13. .example{margin-top:10px;} 
14. .example button{margin:0 5px 10px 0;} 
15. .calendar{display:inline-block;} 
16. </style>  
17. <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script> 
18. <script> 
19. var root = 'http://fgm.cc/learn/calendar/trip-calendar/'; 
20. YUI({ 
21. modules: { 
22. 'trip-calendar': { 
23. fullpath: root + 'trip-calendar.js', 
24. type : 'js', 
25. requires: ['trip-calendar-css'] 
26. }, 
27. 'trip-calendar-css': { 
28. fullpath: root + 'trip-calendar.css', 
29. type : 'css' 
30. } 
31. } 
32. }).use('trip-calendar', function(Y) { 
33. /** 
34. * 非弹出式日历实例 
35. * 直接将日历插入到页面指定容器内 
36. */ 
37. var oCal = new Y.TripCalendar({ 
38. container : '#J_Calendar', //非弹出式日历时指定的容器（必选） 
39. selectedDate: new Date //指定日历选择的日期 
40. }); 
41. //日期点击事件 
42. oCal.on('dateclick', function() { 
43. var selectedDate = this.get('selectedDate'); 
44. alert(selectedDate + '/u3010' + this.getDateInfo(selectedDate) + '/u3011'); 
45. }); 
46. Y.one('#J_Example').delegate('click', function(e) { 
47. var oTarget = e.currentTarget; 
48. value = oTarget.getAttribute('data-value'); 
49. switch(true) { 
50. //日历个数 
51. case oTarget.hasClass('J_Count'): 
52. this.set('count', value).render(); 
53. break; 
54. //显示节假日 
55. case oTarget.hasClass('J_showHoliday'): 
56. this.set('isHoliday', true).render(); 
57. break; 
58. //隐藏节假日 
59. case oTarget.hasClass('J_hideHoliday'): 
60. this.set('isHoliday', false).render(); 
61. break; 
62. //时间范围限定 
63. case oTarget.hasClass('J_Limit'): 
64. this.set('minDate', new Date) 
65. .set('maxDate', '') 
66. .set('afterDays', value) 
67. .set('date', new Date()); 
68. break; 
69. //指定初始日期 
70. case oTarget.hasClass('J_InitDate'): 
71. this.set('minDate', value) 
72. .set('maxDate', '2012-12-21') 
73. .set('date', value); 
74. break; 
75. //下拉表单选择时间 
76. case oTarget.hasClass('J_Select'): 
77. this.set('isSelect', true).render(); 
78. Y.all('.J_Count').slice(1).set('disabled', true); 
79. break; 
80. //取消下拉表单选择 
81. case oTarget.hasClass('J_SelectOff'): 
82. this.set('isSelect', false).render(); 
83. Y.all('.J_Count').slice(1).set('disabled', false); 
84. break; 
85. } 
86. }, 'button', oCal); 
87. }); 
88. </script> 
89. </head> 
90. <body> 
91. <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> 
92. <div id="J_Example" class="example"> 
93. <button class="J_Count" data-value="1">单日历</button> 
94. <button class="J_Count" data-value="2">双日历</button> 
95. <button class="J_Count" data-value="3">三日历</button> 
96. <button class="J_Count" data-value="4">四日历</button> 
97. <br /> 
98. <button class="J_showHoliday">显示节假日</button> 
99. <button class="J_hideHoliday">隐藏节假日</button> 
100. <br /> 
101. <button class="J_Limit" data-value="90">限定范围（今天->90天）</button> 
102. <button class="J_InitDate" data-value="2012-10-01">指定初始日期（2012年10月）</button> 
103. <button class="J_InitDate" data-value="">取消范围限定</button> 
104. <br /> 
105. <button class="J_Select">下拉表单选择时间</button> 
106. <button class="J_SelectOff">取消下拉表单选择</button> 
107. </div> 
108. <div id="J_Calendar" class="calendar"></div> 
109. </body> 
110. </html> 

希望本文所述对大家的javascript程序设计有所帮助。