vue之实现日历----显示农历，滚动日历监听年月改变

第一次手写日历，遇到很多坑，好在都解决，感谢度娘娘（微笑）

gitHub源码（https://github.com/xqtian/calendar）让你满意记得给小星星哦

功能包括显示星期公历，农历，节气等；左右滑动日历滑出上下周，监听当前日期改变年月；日期弹框可自动选择日期；

用的功能点包括，Moment.js ，vux，滑动组件vue-awesome-swiper

当前日历为显示三个月范围的，要是想显示一周或者一个月，可以自行修改，参考Moment.js的方法修改（https://www.jianshu.com/p/94686fd4ae92）

  1 <template>
  2   <div class="picker-calendar">
  3     <div class="select-calendar">
  4       <div class="year-month-day">
  5         <div class=" today iconfont icon-jintian" @click.prevent="clickToday"></div>
  6         <div class=" cur-date" @click.prevent="pickerCalendar" ><span>{{year}}年{{month}}月</span></div>
  7         <div class=" iconfont icon-rili"  @click.prevent="pickerCalendar"></div>
  8       </div>
  9       <div class="date-scroll-container">
 10         <div class="slipe-wrapper">
 11           <swiper :options="swiperOption" ref="mySwiper">
 12             <swiper-slide class="week-row" v-for="(week, index) in calendarData" :key="index">
 13               <div
 14                 class="date-item"
 15                 v-for="(item, index) in week">
 16                 <div class="date-week">{{item.weekCn}}</div>
 17                 <div class="date-day"
 18                   :class="[item.isToday? 'today': '' ,
 19                       ( item.isSelect && !item.isToday)? 'select': '',
 20                       item.isCurMonth? '': 'not-cur-month',
 21                       ]"
 22                     @click.prevent.stop="changeDay(item.stamp)">
 23                   <p class="solar">
 24                     <span class="is-leap" v-if="item.lDate.isLeap && item.lDate.IDayCn==='初一'">闰</span>
 25                     <span :class="[item.week === 6 || item.week === 0 ?'weekend': '']">{{item.date}}</span>
 26                   </p>
 27                   <p class="lunar">
 28                     <span class="festival" v-if="item.lDate.isFestival">{{item.lDate.festival[0]}}</span>
 29                     <span class="term" v-else-if="item.lDate.isTerm">{{item.lDate.Term}}</span>
 30                     <span v-else-if="item.lDate.IDayCn==='初一'">{{item.lDate.IMonthCn.replace('闰','')}}</span>
 31                     <span v-else>{{item.lDate.IDayCn}}</span>
 32                   </p>
 33                 </div>
 34               </div>
 35             </swiper-slide>
 36           </swiper>
 37         </div>
 38       </div>
 39     </div>
 40     <popup v-model="showPopup">
 41       <div class="dialog-calendar">
 42         <div @click="showPopup=false" class="close">
 43           取消
 44         </div>
 45         <div @click="sure" class="sure" >
 46           确定
 47         </div>
 48         <div style="display: block;clear:both;"></div>
 49       </div>
 50       <datetime-view v-model="selectTime"></datetime-view>
 51     </popup>
 52   </div>
 53 </template>
 54
 55 <script>
 56 import 'swiper/dist/css/swiper.css'
 57 import moment from 'moment';
 58 import {Popup,DatetimeView} from 'vux'
 59 import JDatePickerScript from './jDatePicker.js'
 60 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 61 const weekCn = ['日', '一', '二', '三', '四', '五', '六']
 62 const currentMonth = moment();
 63   export default{
 64     data() {
 65       return {
 66         year: 0, // 年份
 67         month: 0, // 月份
 68         curIndex: 0, // 滑动到当前的索引
 69         TodayIndex: 0, // 今天所在的索引
 70         calendarData: [], // 日历数据
 71         lastWeekLength: 0, // 上个月份的星期长度
 72         curWeekLength: 0, // 当前月的星期长度
 73         nextWeekLength: 0, // 下个月的星期长度
 74         currentMonth, // 当前日期
 75         selectDay: [], // 选中的日期
 76         swiperOption: {
 77           on:{
 78               slideChangeTransitionEnd: ()=> {
 79               this.curIndex = this.$refs.mySwiper.swiper.activeIndex;
 80           }}
 81         },
 82         showPopup: false, // 显示弹窗
 83         selectTime: '', // 弹窗选中时间
 84       }
 85     },
 86     computed: {
 87       swiper() {
 88         return this.$refs.mySwiper.swiper;
 89       }
 90     },
 91     // 监听年月改变
 92     watch: {
 93         curIndex: function(){
 94           // 当前索引值在上个月
 95           if(this.curIndex < this.lastWeekLength) {
 96             this.month = this.currentMonth.month() == 0 ? this.month = 12 : this.currentMonth.month();
 97             this.year =  this.currentMonth.month() == 0 ? moment(this.currentMonth).year() - 1 : moment(this.currentMonth).year();
 98           }else if( this.curIndex > (this.lastWeekLength + this.curWeekLength)) { // 当前索引值在下个月
 99             this.month = this.currentMonth.month() == 11 ? this.month = 1 : this.currentMonth.month() + 2;
100             this.year =  this.currentMonth.month() == 11 ? moment(this.currentMonth).year() + 1 : moment(this.currentMonth).year();
101           }else {
102             this.month = this.currentMonth.month() + 1;
103             this.year =  moment(this.currentMonth).year();
104           }
105         }
106     },
107     mounted() {
108       this.calendarData = this.handleCalendar(moment());
109       this.month = moment().month() + 1;
110       this.year = moment().year();
111       this.TodayIndex = (moment().date())/7 + this.lastWeekLength;
112       this.swiper.slideTo(Math.round(this.TodayIndex), 100, false);
113     },
114     methods: {
115       // 点击今天
116       clickToday() {
117         this.currentMonth = moment();
118         this.selectDay = []; // 其他选中的非当天的其他的日期清空
119         this.calendarData = this.handleCalendar(moment());
120         this.month = moment().month() + 1;
121         this.year = moment().year();
122         this.swiper.slideTo(Math.round(this.TodayIndex), 100, false);
123       },
124       // 选择日期
125       pickerCalendar(){
126         this.showPopup = true;
127       },
128       // 改变日期
129       changeDay(stamp) {
130         // 添加选中的非当天的日期
131         if(this.selectDay.length > 0){
132           this.selectDay.splice(0,1);
133           this.selectDay.push(stamp);
134         }else{
135           this.selectDay.push(stamp);
136         }
137         const currentYear = new Date(stamp).getFullYear()
138         const currentMonth = new Date(stamp).getMonth() + 1
139         if (this.year !== currentYear) this.year = currentYear
140         if (this.month !== currentMonth) this.month = currentMonth
141         this.currentMonth = moment(new Date(stamp))
142         this.calendarData = this.handleCalendar(this.currentMonth);
143       },
144       // 确定日期
145       sure() {
146         this.showPopup = false;
147         let time = this.selectTime.split('-');
148         this.year = time[0];
149         this.month = parseInt(time[1]) < 10 ? parseInt(time[1]): time[1] ;
150         this.currentMonth = moment(this.selectTime);
151          // 添加选中的非当天的日期
152         if(this.selectDay.length > 0){
153           this.selectDay.splice(0,1);
154           this.selectDay.push(new Date(this.selectTime).getTime());
155         }else{
156           this.selectDay.push(new Date(this.selectTime).getTime());
157         }
158         this.calendarData = this.handleCalendar(this.currentMonth);
159         // 日历滚动当前选中的日期
160         let index = Math.ceil(parseInt(time[2])/7) + Math.round(this.lastWeekLength);
161         this.swiper.slideTo(index - 1, 100, false);
162       },
163       handleCalendar(currentMonth) {
164         let curMonth = currentMonth.clone();
165         let lastMonth = moment(moment(curMonth).subtract(1, 'months')).startOf('month') // 上个月的第一天
166         let nextMonth = moment(moment(curMonth).add(1, 'months')).startOf('month') // 下个月的第一天
167         this.lastWeekLength = (moment(lastMonth).daysInMonth() + lastMonth.day()) /7;
168         this.curWeekLength = moment(curMonth).daysInMonth()/7;
169         this.nextWeekLength = (moment(nextMonth).daysInMonth() + nextMonth.day())/7;
170         const dateRange = lastMonth.daysInMonth() + curMonth.daysInMonth() + nextMonth.daysInMonth(); // 日历滚动范围，此为显示三个月
171         let calendars = [];
172         let days = [];
173         lastMonth.subtract(lastMonth.day(), 'd');
174         for(let i = 0; i < dateRange + lastMonth.day() + nextMonth.day(); i++) {
175           const obj = {
176               stamp:new Date(lastMonth).getTime(),
177               isToday: lastMonth.isSame(new Date(), 'day'),
178               isSelect: this.selectDay.length>0 && lastMonth.isSame(new Date(this.selectDay[0]), 'day'),
179               isCurMonth: lastMonth.isSame(currentMonth, 'month'),
180               lDate: JDatePickerScript.calendar.getLunar(lastMonth.toISOString()),
181               week: new Date(lastMonth).getDay(),
182               weekCn: weekCn[new Date(lastMonth).getDay()],
183               date: new Date(lastMonth).getDate(),
184               day: lastMonth.date()
185             }
186             lastMonth.add(1, 'd') // 加一天
187             days.push(obj)
188         }
189         // 日期分割成周
190         for(let i = 0; i < dateRange/7; i++) {
191           calendars.push(days.splice(0, 7))
192         }
193         console.log(calendars)
194         return calendars;
195       }
196     },
197     components: {
198       swiper,
199       swiperSlide,
200       Popup,DatetimeView
201     }
202   }
203 </script>
204
205 <style lang="scss" scoped>
206  @import '../../assets/iconfont/iconfont.css';
207   .picker-calendar{
208     // height: 100%;
209     .year-month-day {
210       display: flex;
211       height: 50px;
212       line-height: 50px;
213       padding: 0 14px;
214       .today {
215         float: left;
216         font-size: 2.3rem;
217         color: #ee4e4e;
218       }
219       .cur-date {
220         width: 100%;
221         text-align: center;
222         font-weight: bold;
223         font-size: 1.5rem;
224       }
225       .icon-rili {
226         float: right;
227         font-size: 2rem;
228       }
229     }
230     .date-scroll-container{
231       overflow: hidden;
232       width: 100%;
233       height: 75px;
234       margin-top: 2px;
235       padding-bottom: 4px;
236       -webkit-overflow-scrolling: touch;
237       background-color: #f5f5f5;
238       .slipe-wrapper {
239         height: 75px;
240       }
241       .week-row {
242         width: 100%;
243         float:left;
244         display: flex;
245       }
246       .date-item{
247         flex: 1;
248         text-align: center;
249         float: left;
250         display: inline-block;
251         // font-size: 18rem;
252         color: #999;
253         // height: 6.7rem;
254
255         .date-week{
256           font-size: 1.1rem;
257           height: 30px;
258           line-height: 30px;
259         }
260         .date-day{
261           margin: 0 auto;
262           height: 45px;
263           width: 4rem;
264           // line-height: 4rem;
265           border-radius: 50%;
266           .solar {
267             width: 100%;
268             height: 22px;
269             line-height: 22px;
270             font-weight: bold;
271             font-size: 1.8rem;
272             color: #333;
273             .is-leap {
274               color: #ee4e4e;
275             }
276             .weekend {
277               color: #999;
278             }
279           }
280           .lunar {
281             width: 100%;
282             height: 15px;
283             line-height: 15px;
284             font-size: 1rem;
285             .festival, .term {
286               color: #ee4e4e;
287             }
288           }
289           &.today {
290             width: 40px;
291             height: 40px;
292             border: 1px solid #ee4e4e;
293             .solar {
294               color: #ee4e4e;
295             }
296             .lunar {
297               color: #ee4e4e;
298             }
299           }
300           &.select {
301             width: 42px;
302             height: 42px;
303             background: #0E82F7;
304             box-shadow: 0 2px 4px 0 rgba(14,130,247,0.26);
305             color: #fff;
306             .solar {
307               color: #fff;
308               .weekend {
309                 color: #fff;
310               }
311             }
312             .lunar {
313               .festival, .term {
314                 color: #fff;
315               }
316             }
317           }
318           &.clicked{
319             background-color: #283858;
320             color: #fff;
321             &.today{
322               background-color: #1478F0;
323               color: #fff;
324             }
325           }
326           &.today{
327             color: #1478F0;
328           }
329         }
330       }
331     }
332     .dialog-calendar {
333       height: 30px;
334       line-height: 30px;
335       font-size: 1.5rem;
336       .close{
337         float: left;
338         padding-left: 10px;
339         color: #828282;
340       }
341       .sure{
342         float: right;
343         padding-right: 10px;
344         color:#FF9900;
345       }
346     }
347
348   }
349 </style>

显示农历，要计算很多，这里引入一个js文件，就不用考虑很多情况去计算，项目开发中还是能用插件处理，开发速度快一点吧，毕竟他们只要结果的（呜呜呜）

/*** @1900-2100区间内的公历、农历互转* @charset UTF-8* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]*/
const calendar = {/*** 农历1900-2100的润大小信息表* @Array Of Property* @return Hex*/lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, //1900-19090x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, //1910-19190x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, //1920-19290x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, //1930-19390x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, //1940-19490x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, //1950-19590x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, //1960-19690x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, //1970-19790x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, //1980-19890x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, //1990-19990x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, //2000-20090x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, //2010-20190x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, //2020-20290x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, //2030-20390x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, //2040-2049/**Add By JJonline@JJonline.Cn**/0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, //2050-20590x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, //2060-20690x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, //2070-20790x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, //2080-20890x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, //2090-20990x0d520], //2100/*** 公历每个月份的天数普通表* @Array Of Property* @return Number*/solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],/*** 天干地支之天干速查表* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]* @return Cn string*/Gan: ["\u7532", "\u4e59", "\u4e19", "\u4e01", "\u620a", "\u5df1", "\u5e9a", "\u8f9b", "\u58ec", "\u7678"],/*** 天干地支之地支速查表* @Array Of Property* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]* @return Cn string*/Zhi: ["\u5b50", "\u4e11", "\u5bc5", "\u536f", "\u8fb0", "\u5df3", "\u5348", "\u672a", "\u7533", "\u9149", "\u620c", "\u4ea5"],/*** 天干地支之地支速查表<=>生肖* @Array Of Property* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]* @return Cn string*/Animals: ["\u9f20", "\u725b", "\u864e", "\u5154", "\u9f99", "\u86c7", "\u9a6c", "\u7f8a", "\u7334", "\u9e21", "\u72d7", "\u732a"],/*** 24节气速查表* @Array Of Property* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]* @return Cn string*/solarTerm: ["\u5c0f\u5bd2", "\u5927\u5bd2", "\u7acb\u6625", "\u96e8\u6c34", "\u60ca\u86f0", "\u6625\u5206", "\u6e05\u660e", "\u8c37\u96e8", "\u7acb\u590f", "\u5c0f\u6ee1", "\u8292\u79cd", "\u590f\u81f3", "\u5c0f\u6691", "\u5927\u6691", "\u7acb\u79cb", "\u5904\u6691", "\u767d\u9732", "\u79cb\u5206", "\u5bd2\u9732", "\u971c\u964d", "\u7acb\u51ac", "\u5c0f\u96ea", "\u5927\u96ea", "\u51ac\u81f3"],/*** 1900-2100各年的24节气日期速查表* @Array Of Property* @return 0x string For splice*/sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f','97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa','97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722','9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f','97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e','97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e','97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e','97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e','97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722','7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721','7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2','977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722','977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd','7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722','7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721','7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721','7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd','7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722','7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35','665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721','7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35','7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],/*** 数字转中文速查表* @Array Of Property* @trans ['日','一','二','三','四','五','六','七','八','九','十']* @return Cn string*/nStr1: ["\u65e5", "\u4e00", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d", "\u4e03", "\u516b", "\u4e5d", "\u5341"],/*** 日期转农历称呼速查表* @Array Of Property* @trans ['初','十','廿','卅']* @return Cn string*/nStr2: ["\u521d", "\u5341", "\u5eff", "\u5345"],/*** 月份转农历称呼速查表* @Array Of Property* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']* @return Cn string*/nStr3: ["\u6b63", "\u4e8c", "\u4e09", "\u56db", "\u4e94", "\u516d", "\u4e03", "\u516b", "\u4e5d", "\u5341", "\u51ac", "\u814a"],/*** 返回农历y年一整年的总天数* @param lunar Year* @return Number* @eg:var count = calendar.lYearDays(1987) ;//count=387*/lYearDays: function(y) {var i, sum = 348;for (i = 0x8000; i > 0x8; i >>= 1) { sum += (calendar.lunarInfo[y - 1900] & i) ? 1 : 0; }return (sum + calendar.leapDays(y));},/*** 返回农历y年闰月是哪个月；若y年没有闰月 则返回0* @param lunar Year* @return Number (0-12)* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6*/leapMonth: function(y) { //闰字编码 \u95f0return (calendar.lunarInfo[y - 1900] & 0xf);},/*** 返回农历y年闰月的天数 若该年没有闰月则返回0* @param lunar Year* @return Number (0、29、30)* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29*/leapDays: function(y) {if (calendar.leapMonth(y)) {return ((calendar.lunarInfo[y - 1900] & 0x10000) ? 30 : 29);}return (0);},/*** 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法* @param lunar Year* @return Number (-1、29、30)* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29*/monthDays: function(y, m) {if (m > 12 || m < 1) { return -1 } //月份参数从1至12，参数错误返回-1return ((calendar.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);},/*** 返回公历(!)y年m月的天数* @param solar Year* @return Number (-1、28、29、30、31)* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30*/solarDays: function(y, m) {if (m > 12 || m < 1) { return -1 } //若参数错误 返回-1var ms = m - 1;if (ms == 1) { //2月份的闰平规律测算后确认返回28或29return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28);} else {return (calendar.solarMonth[ms]);}},/*** 农历年份转换为干支纪年* @param  lYear 农历年的年份数* @return Cn string*/toGanZhiYear: function(lYear) {var ganKey = (lYear - 3) % 10;var zhiKey = (lYear - 3) % 12;if (ganKey == 0) ganKey = 10; //如果余数为0则为最后一个天干if (zhiKey == 0) zhiKey = 12; //如果余数为0则为最后一个地支return calendar.Gan[ganKey - 1] + calendar.Zhi[zhiKey - 1];},/*** 公历月、日判断所属星座* @param  cMonth [description]* @param  cDay [description]* @return Cn string*/toAstro: function(cMonth, cDay) {var s = "\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf";var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22];return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + "\u5ea7"; //座
    },/*** 传入offset偏移量返回干支* @param offset 相对甲子的偏移量* @return Cn string*/toGanZhi: function(offset) {return calendar.Gan[offset % 10] + calendar.Zhi[offset % 12];},/*** 传入公历(!)y年获得该年第n个节气的公历日期* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起* @return day Number* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春*/getTerm: function(y, n) {if (y < 1900 || y > 2100) { return -1; }if (n < 1 || n > 24) { return -1; }var _table = calendar.sTermInfo[y - 1900];var _info = [parseInt('0x' + _table.substr(0, 5)).toString(),parseInt('0x' + _table.substr(5, 5)).toString(),parseInt('0x' + _table.substr(10, 5)).toString(),parseInt('0x' + _table.substr(15, 5)).toString(),parseInt('0x' + _table.substr(20, 5)).toString(),parseInt('0x' + _table.substr(25, 5)).toString()];var _calday = [_info[0].substr(0, 1),_info[0].substr(1, 2),_info[0].substr(3, 1),_info[0].substr(4, 2),_info[1].substr(0, 1),_info[1].substr(1, 2),_info[1].substr(3, 1),_info[1].substr(4, 2),_info[2].substr(0, 1),_info[2].substr(1, 2),_info[2].substr(3, 1),_info[2].substr(4, 2),_info[3].substr(0, 1),_info[3].substr(1, 2),_info[3].substr(3, 1),_info[3].substr(4, 2),_info[4].substr(0, 1),_info[4].substr(1, 2),_info[4].substr(3, 1),_info[4].substr(4, 2),_info[5].substr(0, 1),_info[5].substr(1, 2),_info[5].substr(3, 1),_info[5].substr(4, 2),];return parseInt(_calday[n - 1]);},/*** 传入农历数字月份返回汉语通俗表示法* @param lunar month* @return Cn string* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'*/toChinaMonth: function(m) { // 月 => \u6708if (m > 12 || m < 1) { return -1 } //若参数错误 返回-1var s = calendar.nStr3[m - 1];s += "\u6708"; //加上月字return s;},/*** 传入年份月份返回第n个星期日的日期数字* @param y 年份* @param m 月份* @param n 第几个星期日 ( 5>n>0的数字 一个月一般就4个星期日，最多5个)* @return 日期数字；3 ＝ getSunday(2017,9,1); 九月的第一个星期日是3号；超出返回-1*/getSunday(y, m, n) {var d = new Date(y + '-' + m + '-1');var d2 = new Date(y + '-' + (m + 1) + '-1');d2.setDate(0);var maxDay = d2.getDate(); //传入月份的最后一天var week = d.getDay();var first = 1;if (week > 0) first = d.getDate() + (7 - week);var result = (n - 1) * 7 + first;if (result > maxDay) return -1;return result;},/*** 传入农历日期数字返回汉字表示法* @param lunar day* @return Cn string* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'*/toChinaDay: function(d) { //日 => \u65e5var s;switch (d) {case 10:s = '\u521d\u5341';break;case 20:s = '\u4e8c\u5341';break;break;case 30:s = '\u4e09\u5341';break;break;default:s = calendar.nStr2[Math.floor(d / 10)];s += calendar.nStr1[d % 10];}return (s);},/*** 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”* @param y year* @return Cn string* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'*/getAnimal: function(y) {return calendar.Animals[(y - 4) % 12]},/*** 传入阳历年月日获得详细的公历、农历object信息 <=>JSON* @param y  solar year* @param m  solar month* @param d  solar day* @return JSON object* @eg:console.log(calendar.solar2lunar(1987,11,01));*/solar2lunar: function(y, m, d) { //参数区间1900.1.31~2100.12.31//年份限定、上限if (y < 1900 || y > 2100) {return -1; // undefined转换为数字变为NaN
        }//公历传参最下限if (y == 1900 && m == 1 && d < 31) {return -1;}//未传参  获得当天if (!y) {var objDate = new Date();} else {var objDate = new Date(y, parseInt(m) - 1, d)}var i, leap = 0,temp = 0;//修正ymd参数var y = objDate.getFullYear(),m = objDate.getMonth() + 1,d = objDate.getDate();var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000;for (i = 1900; i < 2101 && offset > 0; i++) {temp = calendar.lYearDays(i);offset -= temp;}if (offset < 0) {offset += temp;i--;}//是否今天var isTodayObj = new Date(),isToday = false;if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {isToday = true;}//星期几var nWeek = objDate.getDay(),cWeek = calendar.nStr1[nWeek];//数字表示周几顺应天朝周一开始的惯例if (nWeek == 0) {nWeek = 7;}//农历年var year = i;var leap = calendar.leapMonth(i); //闰哪个月var isLeap = false;//效验闰月for (i = 1; i < 13 && offset > 0; i++) {//闰月if (leap > 0 && i == (leap + 1) && isLeap == false) {--i;isLeap = true;temp = calendar.leapDays(year); //计算农历闰月天数} else {temp = calendar.monthDays(year, i); //计算农历普通月天数
            }//解除闰月if (isLeap == true && i == (leap + 1)) { isLeap = false; }offset -= temp;}// 闰月导致数组下标重叠取反if (offset == 0 && leap > 0 && i == leap + 1) {if (isLeap) {isLeap = false;} else {isLeap = true;--i;}}if (offset < 0) {offset += temp;--i;}//农历月var month = i;//农历日var day = offset + 1;//天干地支处理var sm = m - 1;var gzY = calendar.toGanZhiYear(year);// 当月的两个节气// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`var firstNode = calendar.getTerm(y, (m * 2 - 1)); //返回当月「节」为几日开始var secondNode = calendar.getTerm(y, (m * 2)); //返回当月「节」为几日开始// 依据12节气修正干支月var gzM = calendar.toGanZhi((y - 1900) * 12 + m + 11);if (d >= firstNode) {gzM = calendar.toGanZhi((y - 1900) * 12 + m + 12);}//传入的日期的节气与否var isTerm = false;var Term = null;if (firstNode == d) {isTerm = true;Term = calendar.solarTerm[m * 2 - 2];}if (secondNode == d) {isTerm = true;Term = calendar.solarTerm[m * 2 - 1];}//日柱 当月一日与 1900/1/1 相差天数var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10;var gzD = calendar.toGanZhi(dayCyclical + d - 1);//该日期所属的星座var astro = calendar.toAstro(m, d);//该日期所有的节日var festival = [];//农历传统节日if (month == 1 && day == 1) {festival.push('春节');} else if (month == 1 && day == 15) {festival.push('上元节');} else if (month == 2 && day == 2) {festival.push('龙抬头');} else if (month == 5 && day == 5) {festival.push('端午');} else if (month == 7) {if (day == 7) festival.push('七夕');if (day == 15) festival.push('中元节');} else if (month == 8 && day == 15) {festival.push('中秋');} else if (month == 9 && day == 9) {festival.push('重阳');} else if (month == 10 && day == 15) {festival.push('下元节');} else if (month == 12) {if (day == 8) festival.push('腊八');if (day == 23) festival.push('小年');if (isLeap ? day == calendar.leapDays(year) : calendar.monthDays(month - 1) == 29 ? day == 30 : day == 29) festival.push('除夕');}//公历节日if (m == 1 && d == 1) {festival.splice(0, 0, '元旦');} else if (m == 2 && d == 14) {festival.push('情人节');} else if (m == 3) {if (d == 8) festival.push('妇女节');if (d == 12) festival.push('植树节');} else if (m == 4 && d == 1) {festival.push('愚人节');} else if (m == 5) {if (d == 1) festival.push('劳动节');if (d == 4) festival.push('青年节');if (d == calendar.getSunday(y, m, 2)) festival.push('母亲节');} else if (m == 6) {if (d == 1) festival.push('儿童节');if (d == 4) festival.push('青年节');if (d == calendar.getSunday(y, m, 3)) festival.push('父亲节');} else if (m == 7 && d == 1) {festival.push('建党节');} else if (m == 8 && d == 1) {festival.push('建军节');} else if (m == 9 && d == 10) {festival.push('教师节');} else if (m == 10 && d == 1) {festival.push('国庆节');} else if (m == 11 && d == 1) {festival.push('万圣节');} else if (m == 12) {if (d == 24) festival.push('平安夜');if (d == 25) festival.push('圣诞节');}return { 'lYear': year, 'lMonth': month, 'lDay': day, 'isFestival': festival.length > 0, 'festival': festival, 'Animal': calendar.getAnimal(year), 'IMonthCn': (isLeap ? "\u95f0" : '') + calendar.toChinaMonth(month), 'IDayCn': calendar.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': "\u661f\u671f" + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro };},getLunar: function(date) {var D;if (date == undefined) {D = new Date();} else {D = new Date(date);}D.setHours(D.getHours() + 8) //根据国际UTC标准，中国时区应为：UTC+8var cY = D.getUTCFullYear();var cM = D.getUTCMonth() + 1;var cD = D.getUTCDate();//console.log('getLunar:月'+cM+'--'+cD+'日')return calendar.solar2lunar(cY, cM, cD);},/*** 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON* @param y  lunar year* @param m  lunar month* @param d  lunar day* @param isLeapMonth  lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]* @return JSON object* @eg:console.log(calendar.lunar2solar(1987,9,10));*/lunar2solar: function(y, m, d, isLeapMonth) { //参数区间1900.1.31~2100.12.1var isLeapMonth = !!isLeapMonth;var leapOffset = 0;var leapMonth = calendar.leapMonth(y);var leapDay = calendar.leapDays(y);if (isLeapMonth && (leapMonth != m)) { return -1; } //传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1; } //超出了最大极限值var day = calendar.monthDays(y, m);var _day = day;//bugFix 2016-9-25//if month is leap, _day use leapDays methodif (isLeapMonth) {_day = calendar.leapDays(y, m);}if (y < 1900 || y > 2100 || d > _day) { return -1; } //参数合法性效验//计算农历的时间差var offset = 0;for (var i = 1900; i < y; i++) {offset += calendar.lYearDays(i);}var leap = 0,isAdd = false;for (var i = 1; i < m; i++) {leap = calendar.leapMonth(y);if (!isAdd) { //处理闰月if (leap <= i && leap > 0) {offset += calendar.leapDays(y);isAdd = true;}}offset += calendar.monthDays(y, i);}//转换闰月农历 需补充该年闰月的前一个月的时差if (isLeapMonth) { offset += day; }//1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)var stmap = Date.UTC(1900, 1, 30, 0, 0, 0);var calObj = new Date((offset + d - 31) * 86400000 + stmap);var cY = calObj.getUTCFullYear();var cM = calObj.getUTCMonth() + 1;var cD = calObj.getUTCDate();return calendar.solar2lunar(cY, cM, cD);},/*** 传入农历日期* @param date 类型String，格式：L2017-01-02；闰月：LR2017-06-03* @returns {*|JSON}*/getSolar(date) {if (date == undefined || date == null || date == '' || date.indexOf('L') == -1) return null;var isLeapMonth = date.indexOf('R') > -1;var D = date.replace(/L/, '').replace(/R/, '').split('-');var cY = parseInt(D[0]);var cM = parseInt(D[1]);var cD = parseInt(D[2]);return calendar.lunar2solar(cY, cM, cD, isLeapMonth);},
};
export default { calendar }

下面是效果图，啦啦，就这么结束了，为啥自己开发的时候这么心累呢，现在回头看却说不出来个所以然，跨过去貌似就没那么难了，哈哈

开发中还是要安装很多插件的

安装moment.js包：npm install moment --save

安装vux包：https://www.cnblogs.com/hjbky/p/9007856.html(参考此安装步骤，需要修改配置文件，不过很简单)

安装vue-awesome-swiper包： cnpm install vue-awesome-swiper --save

转载于:https://www.cnblogs.com/eddina/p/9620254.html

vue之实现日历----显示农历，滚动日历监听年月改变相关推荐

在win8日历显示农历和节假日
农历是中国长期采用的一种传统历法,也是最早使用的历法,是非常重要的,所以在Windows 8 Metro日历中显示农历和节假日是很有必要的,下面Win8迷教你如何在Windows 8 日历添加农历和节 ...
JAVASCRIPT显示农历的日历
JAVASCRIPT显示农历的日历显示效果: 2007年2月28日星期三农历丁亥年正月十一<SCRIPT language=JavaScript > function RunGLN ...
android inputmethodmanager 不自动弹出,Android中软键盘InputMethodManager的弹出和隐藏,以及显示和隐藏的监听...
1.首先设置软键盘的弹出模式,设置在初始化View的前面 @Override protected void onCreate(Bundle savedInstanceState) { this.req ...
html屏幕滚动事件监听,JQuery监听页面滚动事件
1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var scrollTop = $(window).scrollTop(); 2.获取指定元素的页面位置: $(obj).offset().top; ...
Vue学习（二）动态绑定与事件监听
v-bind&v-on Day1 文章目录 v-bind&v-on 前言一.V-bind 1.简单实现 2.Class的绑定 2.1对象绑定 2.2数组绑定 3.style的绑定 3 ...
Vue 2 | Part 5 列表渲染和事件监听
之前在vue里面绑定数据,都只是单个地绑定.这期我们来看一下怎样渲染列表,然后通过事件监听方法往列表里面增加item. 列表渲染废话不多说,直接上代码: <div id="app&q ...
web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
系列文章目录内容参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...
一个显示农历的日历小程序
这是个包含农历的日历程序,日历下方会显示传统与国际节假日.这个程序通过Conky把结果显示在我的桌面上,如果要用于其他用途,请自行修改程序.程序需要一个公历对照农历的文本文件,请修改程序中对应路径. ...
[2] 日历任务插件（jquery版）新增日历任务和点击监听
还是先放上图和源代码 jquery版 : https://gitee.com/under_the_sky/dateTask/tree/master/jquery%E7%89%88 本次为日历任务组件新 ...

vue之实现日历----显示农历，滚动日历监听年月改变

vue之实现日历----显示农历，滚动日历监听年月改变相关推荐

最新文章

热门文章