├── README.md
├── app.js
├── app.json
├── app.wxss
├── pages
    ├── detail
    │   ├── detail.js
    │   ├── detail.json
    │   ├── detail.wxml
    │   └── detail.wxss
    └── index
    │   ├── index.js
    │   ├── index.json
    │   ├── index.wxml
    │   └── index.wxss
└── utils
    └── util.js


/README.md:
--------------------------------------------------------------------------------
1 | ## laohuangli
2 | 
3 | 老黄历微信小程序，支持宜/忌事项查阅。
4 | 
5 | ### 预览
6 | 
7 | ![老黄历微信小程序](http://img13.360buyimg.com/cms/jfs/t3157/14/5866689944/399248/19a71e06/588812efN96436a6e.gif!q70.gif)


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | //app.js
 2 | App({
 3 |   onLaunch: function () {
 4 |     //调用API从本地缓存中获取数据
 5 |     // console.log('Launch');
 6 |   },
 7 |   globalData:{
 8 |     appName: '老黄历',
 9 |     author: 'Mr.Zheng'
10 |   },
11 |   getDateDetail: function(dateStr, callback) {
12 |     var that = this;
13 |     var api = 'https://v.juhe.cn/laohuangli/d';
14 |     var appKey = '073a2856e9b3187f878ac05baf204d9e';
15 |     wx.request({
16 |       url: api,
17 |       data: {
18 |         key: appKey,
19 |         date: dateStr
20 |       },
21 |       header: {
22 |         'Content-Type': 'application/json'
23 |       },
24 |       success: function(res) {
25 |         var data = typeof res === 'string' ? JSON.parse(res) : res;
26 |         if (typeof callback === 'function') {
27 |           callback.call(that, data);
28 |         }
29 |       }
30 |     });
31 |   }
32 | })


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "pages":[
 3 |     "pages/index/index",
 4 |     "pages/detail/detail"
 5 |   ],
 6 |   "window":{
 7 |     "backgroundTextStyle":"light",
 8 |     "navigationBarBackgroundColor": "#fff",
 9 |     "navigationBarTitleText": "WeChat",
10 |     "navigationBarTextStyle":"black"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
 1 | /**app.wxss**/
 2 | .container {
 3 |   position: absolute;
 4 |   top: 0;
 5 |   right: 0;
 6 |   bottom: 0;
 7 |   left: 0;
 8 |   box-sizing: border-box;
 9 | } 
10 | 


--------------------------------------------------------------------------------
/pages/detail/detail.js:
--------------------------------------------------------------------------------
  1 | // pages/detail/detail.js
  2 | var app = getApp();
  3 | var utils = require('../../utils/util.js');
  4 | 
  5 | Page({
  6 |   data:{},
  7 |   saveData: {},
  8 |   fetchData: function(date, callback) {
  9 |     var that = this;
 10 |     that.saveData.currentDate = date;
 11 |     wx.showToast({
 12 |       title: '加载中',
 13 |       icon: 'loading',
 14 |       duration: 10000
 15 |     });
 16 |     app.getDateDetail(date, function(data) {
 17 |       var rs;
 18 |       wx.hideToast();
 19 |       if (data.statusCode) {
 20 |         rs = data.data.result;
 21 |       } else {
 22 |         rs = {
 23 |           errMsg: '接口数据请求失败！<br>稍后再试'
 24 |         };
 25 |       }
 26 |       if (typeof callback === 'function') {
 27 |         callback.call(that, rs);
 28 |       }
 29 |     });
 30 |   },
 31 |   onLoad:function(options){
 32 |     var that = this;
 33 |     // 页面初始化 options为页面跳转所带来的参数
 34 |     var dateStr = options['date'] || '1970-0-1';
 35 |     that.setData({
 36 |       date: dateStr
 37 |     });
 38 |     that.fetchData(dateStr, function(data) {
 39 |       that.setData(data);
 40 |     });
 41 |   },
 42 |   onReady:function(){
 43 |     // 页面渲染完成
 44 |   },
 45 |   onShow:function(){
 46 |     // 页面显示
 47 |   },
 48 |   onHide:function(){
 49 |     // 页面隐藏
 50 |   },
 51 |   onUnload:function(){
 52 |     // 页面关闭
 53 |   },
 54 |   goPrevDay: function(e) {
 55 |     var that = this;
 56 |     var target = e.currentTarget;
 57 |     var data = target.dataset;
 58 |     var day = data.day || '1970-01-01';
 59 |     var date, dateStr;
 60 |     day = day.replace(/-/g, '/');
 61 |     date = new Date(day);
 62 |     date.setDate(date.getDate() - 1);
 63 |     dateStr = utils.format(date, '{Y}-{M}-{D}');
 64 |     that.setData({
 65 |       date: dateStr
 66 |     });
 67 |     that.fetchData(dateStr, function(data) {
 68 |       that.setData(data);
 69 |     });
 70 |   },
 71 |   goNextDay: function(e) {
 72 |     var that = this;
 73 |     var target = e.currentTarget;
 74 |     var data = target.dataset;
 75 |     var day = data.day || '1970-01-01';
 76 |     var date, dateStr;
 77 |     day = day.replace(/-/g, '/');
 78 |     date = new Date(day);
 79 |     date.setDate(date.getDate() + 1);
 80 |     dateStr = utils.format(date, '{Y}-{M}-{D}');
 81 |     that.setData({
 82 |       date: dateStr
 83 |     });
 84 |     that.fetchData(dateStr, function(data) {
 85 |       that.setData(data);
 86 |     });
 87 |   },
 88 |   touchStart: function(e) {
 89 |     var that = this;
 90 |     var obj = e.changedTouches;
 91 |     that.saveData.startX = obj[0].pageX;
 92 |   },
 93 |   touchEnd: function(e) {
 94 |     var that = this;
 95 |     var obj = e.changedTouches;
 96 |     var endX = obj[0].pageX;
 97 |     var delta = endX - that.saveData.startX;
 98 |     var day = that.saveData.currentDate || '1970-01-01';
 99 |     var date, dateStr;
100 |     if (Math.abs(delta) < 50) {
101 |       return false;
102 |     }
103 |     day = day.replace(/-/g, '/');
104 |     date = new Date(day);
105 |     if (delta < 0) {
106 |       date.setDate(date.getDate() + 1);
107 |     } else {
108 |       date.setDate(date.getDate() - 1);
109 |     }
110 |     dateStr = utils.format(date, '{Y}-{M}-{D}');
111 |     that.saveData.currentDate = dateStr;
112 |     that.setData({
113 |       date: dateStr
114 |     });
115 |     that.fetchData(dateStr, function(data) {
116 |       that.setData(data);
117 |     });
118 |   }
119 | });


--------------------------------------------------------------------------------
/pages/detail/detail.json:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/pages/detail/detail.wxml:
--------------------------------------------------------------------------------
 1 | <!--pages/detail/detail.wxml-->
 2 | <view class="container" bindtouchstart="touchStart" bindtouchend="touchEnd">
 3 |     <view class="err-msg" wx:if="{{errMsg}}">{{errMsg}}</view>
 4 |     <view class="date-detail" wx:else>
 5 |         <view class="header">{{yangli}} <text class="sub-title">({{yinli}})</text></view>
 6 |         <view class="table">
 7 |             <view class="row row-yi">
 8 |                 <view class="left">宜</view>
 9 |                 <view class="right">
10 |                     {{yi}}
11 |                 </view>
12 |             </view>
13 |             <view class="row row-ji">
14 |                 <view class="left">忌</view>
15 |                 <view class="right">
16 |                     {{ji}}
17 |                 </view>
18 |             </view>
19 |         </view>
20 |         <!--<view>{{wuxing}}</view>
21 |         <view>{{chongsha}}</view>
22 |         <view>{{baiji}}</view>
23 |         <view>{{jishen}}</view>
24 |         <view>{{yi}}</view>
25 |         <view>{{xiongshen}}</view>
26 |         <view>{{ji}}</view>-->
27 |     </view>
28 |     <view class="footer">
29 |         <button class="c-day c-prev" hover-class="c-hover" bindtap="goPrevDay" data-day="{{date}}">前一天</button>
30 |         <button class="c-day c-next" hover-class="c-hover" bindtap="goNextDay" data-day="{{date}}">后一天</button>
31 |     </view>
32 | </view>
33 | 


--------------------------------------------------------------------------------
/pages/detail/detail.wxss:
--------------------------------------------------------------------------------
 1 | /* pages/detail/detail.wxss */
 2 | .header {
 3 |     height: 50px;
 4 |     line-height: 50px;
 5 |     text-align: center;
 6 |     font-size: 24px;
 7 |     color: #333;
 8 | }
 9 | 
10 | .header .sub-title {
11 |     font-size: 16px;
12 | }
13 | 
14 | .table .row {
15 |     position: relative;
16 |     background-color: #f44;
17 |     overflow: hidden;
18 | }
19 | 
20 | .table .row-yi {
21 |     background-color: #fe4;
22 | }
23 | 
24 | .table .row .left {
25 |     position: absolute;
26 |     top: 0;
27 |     bottom: 0;
28 |     left: 0;
29 |     z-index: 2;
30 |     display: flex;
31 |     justify-content: center;
32 |     align-items: center;
33 |     width: 25%;
34 |     font-size: 48px;
35 |     color: #fff;
36 | }
37 | 
38 | .table .row-yi .left {
39 |     color: #333;
40 | }
41 | 
42 | .table .row .right {
43 |     margin-left: 25%;
44 |     padding: 20px 15px;
45 |     display: flex;
46 |     align-items: center;
47 |     min-height: 80px;
48 |     line-height: 1.432;
49 |     box-sizing: border-box;
50 |     background-color: #ffddd3;
51 | }
52 | 
53 | .table .row-yi .right {
54 |     background-color: #ffa;
55 | }
56 | 
57 | .footer {
58 |   position: absolute;
59 |   right: 0;
60 |   bottom: 0;
61 |   left: 0;
62 |   height: 50px;
63 | }
64 | 
65 | .footer .c-day {
66 |   float: left;
67 |   width: 50%;
68 |   height: 50px;
69 |   line-height: 50px;
70 |   text-align: center;
71 |   color: #fff;
72 |   font-size: 16px;
73 |   background-color: #3b9aa0;
74 |   border-radius: 0;
75 |   box-sizing: border-box;
76 | }
77 | 
78 | .footer .c-hover {
79 |   background-color: rgba(59, 154, 160, .9);
80 | }
81 | 
82 | 
83 | .footer .c-day.c-prev {
84 |   border-right: 1px solid #fff;
85 | }
86 | 
87 | .footer .c-day.c-next {
88 |   border-left: 1px solid #fff;
89 | }


--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
  1 | //index.js
  2 | var utils = require('../../utils/util.js');
  3 | Page({
  4 |   data: {
  5 |     userInfo: {}
  6 |   },
  7 |   saveData: {},
  8 |   //事件处理函数
  9 |   bindViewTap: function() {
 10 |     wx.navigateTo({
 11 |       url: '../detail/detail'
 12 |     })
 13 |   },
 14 |   getTableArray: function(year, month) {
 15 |     var date = year && month ? new Date(year, month - 1, 1) : new Date();
 16 |     var dayCount = 0;
 17 |     var startRow = 0;
 18 |     var tableArray = [];
 19 |     var diffStart = 0;
 20 |     var todayStr = utils.format(new Date(), '{Y}-{M}-{D}');
 21 |     date.setMonth(date.getMonth() + 1);
 22 |     date.setDate(0);
 23 |     dayCount = date.getDate();
 24 |     date.setDate(1);
 25 |     diffStart = date.getDay();
 26 |     for (var i = 1; i <= dayCount; i++) {
 27 |       if (!utils.isArray(tableArray[startRow])) {
 28 |         tableArray[startRow] = Array(7);
 29 |       }
 30 |       date.setDate(i);
 31 |       var lunDate = utils.e2c(date.getFullYear(), date.getMonth(), i).day;
 32 |       var tmpDate = (lunDate < 11) ? '初' : ((lunDate < 20) ? '十' : ((lunDate < 30) ? '廿' : '三十'));
 33 |       if (lunDate % 10 != 0 || lunDate == 10) {
 34 |         tmpDate += utils.numString.charAt((lunDate - 1) % 10);
 35 |       }
 36 |       var dateStr = utils.format(date, '{Y}-{M}-{D}');
 37 |       tableArray[startRow][date.getDay()] = {
 38 |         date: dateStr,
 39 |         calendar: utils.doubleNumber(i),
 40 |         lunar: tmpDate,
 41 |         isToday: dateStr === todayStr
 42 |       };
 43 |       if ((i + diffStart) % 7 === 0) {
 44 |         startRow++;
 45 |       }
 46 |     }
 47 |     return tableArray;
 48 |   },
 49 |   getTitle: function(year, month, date) {
 50 |     // 格式化农历日期
 51 |     var lunarObj = utils.e2c(year, month, date);
 52 |     var lunYear = '';
 53 |     lunYear += utils.tgString.charAt((lunarObj.year - 4) % 10);
 54 |     lunYear += utils.dzString.charAt((lunarObj.year - 4) % 12);
 55 |     lunYear += "(";
 56 |     lunYear += utils.sx.charAt((lunarObj.year - 4) % 12);
 57 |     lunYear += ")年";
 58 |     var monStr = utils.format(new Date(year, month, date), '{Y}年{M}月');
 59 |     var lunMon = lunYear + utils.monString.charAt(lunarObj.month - 1) + '月';
 60 |     return {
 61 |       month: monStr,
 62 |       lunMonth: lunMon
 63 |     };
 64 |   },
 65 |   onLoad: function () {
 66 |     // console.log('onLoad')
 67 |     var that = this;
 68 |     var today = new Date();
 69 |     var tableArray = [];
 70 |     var itemHeight = '20%';
 71 |     var year = today.getFullYear();
 72 |     var month = today.getMonth();
 73 |     var date = today.getDate();
 74 |     var titleObj = this.getTitle(year, month, date);
 75 | 
 76 |     tableArray = this.getTableArray(year, month + 1);
 77 |     itemHeight = 1 / tableArray.length * 100 + '%';
 78 | 
 79 |     this.saveData.currentDate = year + '-' +  month + '-' + date;
 80 | 
 81 |     this.setData({
 82 |       month: year + '-' +  month + '-' + date,
 83 |       dateTable: tableArray,
 84 |       itemHeight: itemHeight,
 85 |       date: {
 86 |         calendar: titleObj.month,
 87 |         lunar: titleObj.lunMonth
 88 |       }
 89 |     });
 90 |     //调用应用实例的方法获取全局数据
 91 |     // app.getDateDetail('2017-01-22', function(data) {
 92 |     //   console.log(data);
 93 |     // });
 94 |   },
 95 |   toDetail: function(e) {
 96 |     var target = e.currentTarget;
 97 |     var data = target.dataset;
 98 |     var date = data.date;
 99 |     wx.navigateTo({
100 |       url: '../detail/detail?date=' + date
101 |     });
102 |   },
103 |   goPrevMonth: function(e) {
104 |     var target = e.currentTarget;
105 |     var data = target.dataset;
106 |     var dm = data.month;
107 |     var dArr = dm.split('-');
108 |     var y = +dArr[0] || 1970;
109 |     var m = +dArr[1] || 0;
110 |     var d = +dArr[2] || 1;
111 | 
112 |     var today;
113 |     var tableArray = [];
114 |     var itemHeight = '20%';
115 |     var year;
116 |     var month;
117 |     var date;
118 |     var titleObj;
119 | 
120 |     if (m <= 0) {
121 |       m = 11;
122 |       y -= 1;
123 |     } else {
124 |       m -= 1;
125 |     }
126 |     today = new Date(y, m, 1);
127 |     year = today.getFullYear();
128 |     month = today.getMonth();
129 |     date = today.getDate();
130 |     titleObj = this.getTitle(year, month, date);
131 | 
132 |     tableArray = this.getTableArray(year, month + 1);
133 |     itemHeight = 1 / tableArray.length * 100 + '%';
134 | 
135 |     this.saveData.currentDate = year + '-' +  month + '-' + date;
136 | 
137 |     this.setData({
138 |       month: year + '-' +  month + '-' + date,
139 |       dateTable: tableArray,
140 |       itemHeight: itemHeight,
141 |       date: {
142 |         calendar: titleObj.month,
143 |         lunar: titleObj.lunMonth
144 |       }
145 |     });
146 |   },
147 |   goNextMonth: function(e) {
148 |     var target = e.currentTarget;
149 |     var data = target.dataset;
150 |     var dm = data.month;
151 |     var dArr = dm.split('-');
152 |     var y = +dArr[0] || 1970;
153 |     var m = +dArr[1] || 0;
154 |     var d = +dArr[2] || 1;
155 | 
156 |     var today;
157 |     var tableArray = [];
158 |     var itemHeight = '20%';
159 |     var year;
160 |     var month;
161 |     var date;
162 |     var titleObj;
163 | 
164 |     if (m >= 11) {
165 |       m = 0;
166 |       y += 1;
167 |     } else {
168 |       m += 1;
169 |     }
170 |     today = new Date(y, m, 1);
171 |     year = today.getFullYear();
172 |     month = today.getMonth();
173 |     date = today.getDate();
174 |     titleObj = this.getTitle(year, month, date);
175 | 
176 |     tableArray = this.getTableArray(year, month + 1);
177 |     itemHeight = 1 / tableArray.length * 100 + '%';
178 | 
179 |     this.saveData.currentDate = year + '-' +  month + '-' + date;
180 | 
181 |     this.setData({
182 |       month: year + '-' +  month + '-' + date,
183 |       dateTable: tableArray,
184 |       itemHeight: itemHeight,
185 |       date: {
186 |         calendar: titleObj.month,
187 |         lunar: titleObj.lunMonth
188 |       }
189 |     });
190 |   },
191 |   touchStart: function(e) {
192 |     var that = this;
193 |     var obj = e.changedTouches;
194 |     that.saveData.startX = obj[0].pageX;
195 |   },
196 |   touchEnd: function(e) {
197 |     var that = this;
198 |     var obj = e.changedTouches;
199 |     var endX = obj[0].pageX;
200 |     var delta = endX - that.saveData.startX;
201 |     var dateStr = that.saveData.currentDate || '1970-0-1';
202 |     var dArr = dateStr.split('-');
203 |     var y = +dArr[0];
204 |     var m = +dArr[1];
205 |     var d = +dArr[2];
206 | 
207 |     var today;
208 |     var tableArray = [];
209 |     var itemHeight = '20%';
210 |     var year;
211 |     var month;
212 |     var date;
213 |     var titleObj;
214 | 
215 |     if (Math.abs(delta) < 50) {
216 |       return false;
217 |     }
218 |     if (delta < 0) {
219 |       if (m >= 11) {
220 |         m = 0;
221 |         y += 1;
222 |       } else {
223 |         m += 1;
224 |       }
225 |     } else {
226 |       if (m <= 0) {
227 |         m = 11;
228 |         y -= 1;
229 |       } else {
230 |         m -= 1;
231 |       }
232 |     }
233 |     today = new Date(y, m, 1);
234 |     year = today.getFullYear();
235 |     month = today.getMonth();
236 |     date = today.getDate();
237 |     titleObj = this.getTitle(year, month, date);
238 | 
239 |     tableArray = this.getTableArray(year, month + 1);
240 |     itemHeight = 1 / tableArray.length * 100 + '%';
241 | 
242 |     this.saveData.currentDate = year + '-' +  month + '-' + date;
243 | 
244 |     this.setData({
245 |       month: year + '-' +  month + '-' + date,
246 |       dateTable: tableArray,
247 |       itemHeight: itemHeight,
248 |       date: {
249 |         calendar: titleObj.month,
250 |         lunar: titleObj.lunMonth
251 |       }
252 |     });
253 |   }
254 | });
255 | 


--------------------------------------------------------------------------------
/pages/index/index.json:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
 1 | <!--index.wxml-->
 2 | <view class="container" bindtouchstart="touchStart" bindtouchend="touchEnd">
 3 |   <view class="header">
 4 |     {{date.calendar}}<text class="lunar">({{date.lunar}})</text>
 5 |   </view>
 6 |   <view class="weekday">
 7 |     <view class="day">日</view>
 8 |     <view class="day">一</view>
 9 |     <view class="day">二</view>
10 |     <view class="day">三</view>
11 |     <view class="day">四</view>
12 |     <view class="day">五</view>
13 |     <view class="day">六</view>
14 |   </view>
15 |   <view class="table">
16 | 
17 |     <view class="row" wx:for="{{dateTable}}" wx:for-item="row" style="height:{{itemHeight}};">
18 |       <block  wx:for="{{row}}" wx:for-item="day">
19 |         <block wx:if="{{day}}">
20 |           <view class="date today" wx:if="{{day.isToday}}" hover-class="date-hover" bindtap="toDetail" data-date="{{day.date}}">
21 |             <view class="date-box">
22 |               <text class="cal-date">{{day.calendar}}</text>
23 |               <view class="lun-date">{{day.lunar}}</view>
24 |             </view>
25 |           </view>
26 |           <view class="date" hover-class="date-hover" bindtap="toDetail" data-date="{{day.date}}" wx:else>
27 |             <view class="date-box">
28 |               <text class="cal-date">{{day.calendar}}</text>
29 |               <view class="lun-date">{{day.lunar}}</view>
30 |             </view>
31 |           </view>
32 |         </block>
33 |         <view class="date date-empty" wx:else></view>
34 |       </block>
35 |     </view>
36 |   </view>
37 |   <view class="footer">
38 |     <button class="c-month c-prev" hover-class="c-hover" bindtap="goPrevMonth" data-month="{{month}}">上一月</button>
39 |     <button class="c-month c-next" hover-class="c-hover" bindtap="goNextMonth" data-month="{{month}}">下一月</button>
40 |   </view>
41 | </view>
42 | 


--------------------------------------------------------------------------------
/pages/index/index.wxss:
--------------------------------------------------------------------------------
  1 | /**index.wxss**/
  2 | .header {
  3 |   padding-left: 10px;
  4 |   height: 50px;
  5 |   line-height: 50px;
  6 |   font-size: 24px;
  7 | }
  8 | 
  9 | .header .lunar {
 10 |   font-size: 14px;
 11 | }
 12 | 
 13 | .weekday {
 14 |   height: 50px;
 15 |   color: #fff;
 16 |   font-size: 16px;
 17 | }
 18 | 
 19 | .weekday .day {
 20 |   float: left;
 21 |   width: 14.2857%;
 22 |   line-height: 50px;
 23 |   text-align: center;
 24 |   background-color: #3b65a0;
 25 | }
 26 | 
 27 | .weekday .day:nth-child(even) {
 28 |   background-color: #3b9aa0;
 29 | }
 30 | 
 31 | .table {
 32 |   position: absolute;
 33 |   top: 100px;
 34 |   bottom: 50px;
 35 |   left: 0;
 36 |   width: 100%;
 37 | }
 38 | 
 39 | .table .row {
 40 |   height: 20%;
 41 |   border-bottom: 1px solid #dedede; /* 3b65a0 */
 42 |   box-sizing: border-box;
 43 | }
 44 | 
 45 | .table .row:last-child {
 46 |   border-bottom: 0;
 47 | }
 48 | 
 49 | .table .row .date {
 50 |   float: left;
 51 |   display: flex;
 52 |   width: 14.2851%;
 53 |   height: 100%;
 54 |   justify-content: center;
 55 |   align-items: center;
 56 |   box-sizing: border-box;
 57 | }
 58 | 
 59 | .table .row .date.today {
 60 |   background-color: #ffa;
 61 | }
 62 | 
 63 | .table .row .date-hover {
 64 |   background-color: #e0e0e0;
 65 | }
 66 | 
 67 | .table .row .date.date-empty {
 68 |   background-color: #efefef;
 69 | }
 70 | 
 71 | .table .row .date:nth-child(odd) {
 72 |   border-left: 1px solid #dedede; /* 3b65a0 */
 73 |   border-right: 1px solid #dedede;
 74 | }
 75 | 
 76 | .table .cal-date {
 77 |   display: block;
 78 |   text-align: center;
 79 |   font-size: 32px;
 80 |   color: #666;
 81 | }
 82 | 
 83 | .table .lun-date {
 84 |   display: block;
 85 |   text-align: center;
 86 |   font-size: 14px;
 87 |   color: #999;
 88 | }
 89 | 
 90 | .footer {
 91 |   position: absolute;
 92 |   right: 0;
 93 |   bottom: 0;
 94 |   left: 0;
 95 |   height: 50px;
 96 | }
 97 | 
 98 | .footer .c-month {
 99 |   float: left;
100 |   width: 50%;
101 |   height: 50px;
102 |   line-height: 50px;
103 |   text-align: center;
104 |   color: #fff;
105 |   font-size: 16px;
106 |   background-color: #3b9aa0;
107 |   border-radius: 0;
108 |   box-sizing: border-box;
109 | }
110 | 
111 | .footer .c-hover {
112 |   background-color: rgba(59, 154, 160, .9);
113 | }
114 | 
115 | .footer .c-month.c-prev {
116 |   border-right: 1px solid #fff;
117 | }
118 | 
119 | .footer .c-month.c-next {
120 |   border-left: 1px solid #fff;
121 | }


--------------------------------------------------------------------------------
/utils/util.js:
--------------------------------------------------------------------------------
  1 | var dateTool = {
  2 |   CalendarData: [
  3 |     0x0b557, //1949
  4 |     0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, //1950-1959
  5 |     0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, //1960-1969
  6 |     0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, //1970-1979
  7 |     0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, //1980-1989
  8 |     0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, //1990-1999
  9 |     0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, //2000-2009
 10 |     0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, //2010-2019
 11 |     0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, //2020-2029
 12 |     0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, //2030-2039
 13 |     0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, //2040-2049
 14 |     0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, //2050-2059
 15 |     0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, //2060-2069
 16 |     0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, //2070-2079
 17 |     0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, //2080-2089
 18 |     0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, //2090-2099
 19 |     0x0d520 // 2100
 20 |   ],
 21 |   madd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
 22 |   tgString: '甲乙丙丁戊己庚辛壬癸',
 23 |   dzString: '子丑寅卯辰巳午未申酉戌亥',
 24 |   numString: '一二三四五六七八九十',
 25 |   monString: '正二三四五六七八九十冬腊',
 26 |   weekString: '日一二三四五六',
 27 |   sx: '鼠牛虎兔龙蛇马羊猴鸡狗猪',
 28 |   // 获取当前日期
 29 |   now: function (withWeek) {
 30 |     var d = new Date();
 31 |     var year = d.getFullYear();
 32 |     var month = d.getMonth() + 1;
 33 |     var date = d.getDate();
 34 |     var week = d.getDay();
 35 |     var curDateTime = year;
 36 |     if (month > 9) {
 37 |       curDateTime = curDateTime + '年' + month;
 38 |     } else {
 39 |       curDateTime = curDateTime + '年0' + month;
 40 |     }
 41 |     if (date > 9) {
 42 |       curDateTime = curDateTime + '月' + date + '日';
 43 |     } else {
 44 |       curDateTime = curDateTime + '月0' + date + '日';
 45 |     }
 46 |     if (withWeek) {
 47 |       var weekday = '星期' + this.weekString[week];
 48 |       curDateTime = curDateTime + ' ' + weekday;
 49 |     }
 50 |     return curDateTime;
 51 |   },
 52 |   lunar: function () {
 53 |     var D = new Date();
 54 |     var yy = D.getFullYear();
 55 |     var mm = D.getMonth() + 1;
 56 |     var dd = D.getDate();
 57 |     if (yy < 100) {
 58 |       yy = '19' + yy;
 59 |     }
 60 |     return this.getLunarDay(yy, mm, dd);
 61 |   },
 62 |   getLunarDay: function (solarYear, solarMonth, solarDay) {
 63 |     if (solarYear < 1949 || solarYear > 2100) {
 64 |       return '';
 65 |     } else {
 66 |       solarMonth = (parseInt(solarMonth) > 0) ? (solarMonth - 1) : 11;
 67 |       this.e2c(solarYear, solarMonth, solarDay);
 68 |       return this.getcDateString();
 69 |     }
 70 |   },
 71 |   getcDateString: function () {
 72 |     var tmp = '';
 73 |     /**
 74 |      * 显示农历年：（如：甲午(马)年）
 75 |      */
 76 |     /*
 77 |     tmp += this.tgString.charAt((this.cYear - 4) % 10);
 78 |     tmp += this.dzString.charAt((this.cYear - 4) % 12);
 79 |     tmp += "(";
 80 |     tmp += this.sx.charAt((this.cYear - 4) % 12);
 81 |     tmp += ")年 ";
 82 |     */
 83 |     if (this.cMonth < 1) {
 84 |       tmp += '(闰)';
 85 |       tmp += this.monString.charAt(-this.cMonth - 1);
 86 |     } else {
 87 |       tmp += this.monString.charAt(this.cMonth - 1);
 88 |     }
 89 |     tmp += '月';
 90 |     tmp += (this.cDay < 11) ? '初' : ((this.cDay < 20) ? '十' : ((this.cDay < 30) ? '廿' : '三十'));
 91 |     if (this.cDay % 10 != 0 || this.cDay == 10) {
 92 |       tmp += this.numString.charAt((this.cDay - 1) % 10);
 93 |     }
 94 |     return tmp;
 95 |   },
 96 |   lYearDays: function (y) {
 97 |     var i, sum = 348;
 98 |     for (i = 0x8000; i > 0x8; i >>= 1) {
 99 |       sum += (this.CalendarData[y - 1949] & i) ? 1 : 0;
100 |     }
101 |     return (sum + this.leapDays(y));
102 |   },
103 |   leapDays: function (y) {
104 |     if (this.leapMonth(y)) {
105 |       return ((this.CalendarData[y - 1949] & 0x10000) ? 30 : 29);
106 |     }
107 |     return (0);
108 |   },
109 |   leapMonth: function (y) {
110 |     return (this.CalendarData[y - 1949] & 0xf);
111 |   },
112 |   monthDays: function (y, m) {
113 |     // 月份参数从1至12，参数错误返回-1
114 |     if (m > 12 || m < 1) {
115 |       return -1;
116 |     }
117 |     return ((this.CalendarData[y - 1949] & (0x10000 >> m)) ? 30 : 29);
118 |   },
119 |   // 农历转换
120 |   e2c: function () {
121 |     this.theDate = (arguments.length != 3) ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
122 | 
123 |     var objDate = this.theDate;
124 |     var y = objDate.getFullYear();
125 |     var m = objDate.getMonth();
126 |     var d = objDate.getDate();
127 |     var temp = 0;
128 |     var offset = (Date.UTC(y, m, d) - Date.UTC(1949, 0, 31)) / 86400000;
129 |     for (i = 1949; i < 2101 && offset > 0; i++) {
130 |       temp = this.lYearDays(i);
131 |       offset -= temp;
132 |     }
133 |     if (offset < 0) {
134 |       offset += temp;
135 |       i--;
136 |     }
137 | 
138 |     this.cYear = i;
139 |     var leap = this.leapMonth(i); // 闰哪个月
140 |     var isLeap = false;
141 |     // 农历月不是闰月
142 |     var notLeapMounth = true;
143 | 
144 |     // 效验闰月
145 |     for (var i = 1; i < 13 && offset > 0; i++) {
146 |       // 闰月
147 |       if (leap > 0 && i == (leap + 1) && isLeap == false) {
148 |         --i;
149 |         isLeap = true;
150 |         notLeapMounth = false;
151 |         temp = this.leapDays(this.cYear); // 计算农历闰月天数
152 |       } else {
153 |         notLeapMounth = true;
154 |         temp = this.monthDays(this.cYear, i); // 计算农历普通月天数
155 |       }
156 |       // 解除闰月
157 |       if (isLeap == true && i == (leap + 1)) {
158 |         isLeap = false;
159 |       }
160 |       offset -= temp;
161 |     }
162 |     // 闰月导致数组下标重叠取反
163 |     if (offset == 0 && leap > 0 && i == leap + 1) {
164 |       if (isLeap) {
165 |         isLeap = false;
166 |       } else {
167 |         isLeap = true;
168 |         --i;
169 |       }
170 |     }
171 |     if (offset < 0) {
172 |       offset += temp;
173 |       --i;
174 |     }
175 |     //农历月
176 |     this.cMonth = notLeapMounth ? i : -i;
177 |     var dayLen = this.monthDays(this.cYear, i);
178 |     //农历日
179 |     this.cDay = offset + 3 > dayLen ? ((offset + 3) % dayLen) : offset + 3;
180 | 
181 |     return {
182 |       year: this.cYear,
183 |       month: this.cMonth,
184 |       day: this.cDay
185 |     };
186 |   },
187 |   doubleNumber: function (num) {
188 |     return num < 10 ? "0" + num : num;
189 |   },
190 |   format: function (date, tpl) {
191 |     var week = "日一二三四五六";
192 |     var Y = date.getFullYear();
193 |     var M = this.doubleNumber(date.getMonth() + 1);
194 |     var D = this.doubleNumber(date.getDate());
195 |     var W = week.charAt(date.getDay());
196 |     var h = this.doubleNumber(date.getHours());
197 |     var i = this.doubleNumber(date.getMinutes());
198 |     var s = this.doubleNumber(date.getSeconds());
199 |     return tpl.replace(/\{Y\}/g, Y)
200 |       .replace(/\{M\}/g, M)
201 |       .replace(/\{D\}/g, D)
202 |       .replace(/\{W\}/g, W)
203 |       .replace(/\{h\}/g, h)
204 |       .replace(/\{i\}/g, i)
205 |       .replace(/\{s\}/g, s);
206 |   },
207 |   isArray: function (arr) {
208 |     if (Array.isArray) {
209 |       return Array.isArray(arr);
210 |     }
211 |     return Object.prototype.toString.call(arr) === '[object Array]';
212 |   }
213 | };
214 | 
215 | module.exports = dateTool;
216 | 


--------------------------------------------------------------------------------