Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to encapsulate the vue calendar component. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The details are as follows

Illustration

The code for the encapsulated component is as follows

Start time

{{starttime.substring (0pr 4) +'-'+ starttime.substring (4pr 6) +'-'+ starttime.substring (6pr 8)}}

End time

{{endtime==''?' Please select the end date': endtime.substring (0Magne4) +'-'+ endtime.substring (4pc6) +'-'+ endtime.substring (6pc8)}}

Last month {{Year}} year {{month}} month next month {{item}} {{item.value}} cancel the determination of export default {name: "Calendar" Data () {return {showtimemask:false, Puton_time:'', / / launch date is shown today by default Puton_Start:'', / / to save the launch start and end date is used to initialize the selected value Puton_End:'', nowtime:''when the cancel button is clicked / / time of current date-20190203 format used to compare clickitem:', / / time per click saved-20190203 format used to compare clickcount: 0, / / number of clicks-to determine start time or end time starttime:', / / start time digits default date of the day endtime:'' / / end time number default date of the day Year: new Date () .getFullYear (), / / year on the calendar-dynamically changed month: new Date () .getMonth () + 1, / / month on the calendar-dynamically changed Day: new Date () .getDate () / / Talent on the calendar-dynamically changing nowYear: new Date (). GetFullYear (), nowmonth: new Date (). GetMonth () + 1, nowDay: new Date (). GetDate (), calendarList: [],} }, created () {/ / the calendar operation starts this.Draw (this.nowYear, this.nowmonth); let time_month = this.nowmonth; / / current month let time_day = this.nowDay; / / current number of days if (this.nowmonth < 10) {time_month = 0 +''+ this.nowmonth } if (this.nowDay < 10) {time_day = 0 +'+ this.nowDay;} this.nowtime = this.nowYear +'+ time_month +''+ time_day; this.starttime = this.nowtime; this.endtime = this.nowtime This.Puton_time = this.starttime.substring (0,4) +'-'+ this.starttime.substring (4,6) +'-'+ this.starttime.substring (6,8) +'so far' This.Puton_Start = this.nowtime, this.Puton_End = this.nowtime, this.$emit ('str',this.Puton_time) / / end of operation on calendar}, mounted () {}, methods: {showmask1 () {if (this.showtimemask= = true) {/ / this.showtimemask=false / / hide pop-up box this.cancle ();} else {this.showtimemask = true; / / Show pop-up box}}, Draw: function (Year, Month) {/ / date list var calendar = [] / / use the date value of the first day of the month in the week as the number of days away from the first day of the month (get the day of the week) for (var I = 1, firstDay = new Date (Year, Month-1, 1). GetDay (); I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.