Vue component (component) Example of exquisite calendar method implementation, vuecomponent

Vue component (component) Example of exquisite calendar method implementation, vuecomponent

Component is one of the most powerful functions of Vue. Components can expand HTML elements, encapsulate reusable code, and abstract some components based on project requirements. Each component contains the presentation, functions, and styles. Each page uses different components to splice pages as needed. This development mode makes the front-end page easy to expand and highly flexible, and the components are decoupled.

Recently, at the company's requirements, we need to develop a beautiful calendar component (IE9 + for IOS, Android, and PC can all run). I hope you can share it with me after writing it.

First

Code has been shared to https://github.com/zhangKunUserGit/vue-component (local download)

Usage

Let's talk about how to use it as needed (the above is HTML, and below is JS)

<date-picker v-if="showDatePicker" :date="date" :min-date="minDate" :max-date="maxDate" @confirm="confirm" @cancel="cancel" ></date-picker>

Import DataPicker from '. /components/DatePicker. vue '; import '. /style. scss '; new Vue ({el:' # app', data () {return {date: '2017-09-11 ', minDate: '2017-09-11', maxDate: '2017-09-11 ', showDatePicker: false, selectedDate: 'click to select date', };}, methods: {openDatePicker () {this. showDatePicker = true;}, confirm (value) {this. showDatePicker = false; this. selectedDate = value;}, cancel () {this. showDatePicker = false ;},}, components: {DataPicker ,},});

We provide the maximum, minimum, and initial values, the only disadvantage is that the time format can only be YYYY-MM-DD (), you can pull the code from github to run a look (because not carefully tested, there may be bugs and performance issues, and I hope to point them out ).

(1) Draw the interface first

This is not the point. HTML and CSS should be very simple. You may feel that my css name is too long because it is used by our company, worry about the impact of other styles (there may be other ways to do this, I hope the gods will point it out)

(2) assembly date list

First look at the Code:

Rows () {const {year, month} = this. showDate; const months = (new Date (year, month, 0 )). getDate (); const result = []; let row = []; let weekValue; // grouping by week (let I = 1; I <= months; I + = 1) {// obtain the week Based on the Date and set the start value to 1 instead of 0 weekValue = (new Date (year, month, I )). getDay () + 1; // judge the day of the week on the first day of the month, and fill in the blank area before if (I = 1 & weekValue! = 1) {this. addRowEmptyValue (row, weekValue); this. addRowDayValue (row, I);} else {this. addRowDayValue (row, I); // judge the last day of the month in the day of the week, and fill in the blank area after if (I === months & weekValue! = 7) {this. addRowEmptyValue (row, (7-weekValue) + 1) ;}/// group by week if (weekValue % 7 === 0 | I === months) {result. push (row); row = [] ;}} this. showDate. monthStr = monthJson [this. showDate. month]; return result ;},

My thinking is:

(1) obtain the number of days of a month and group them by week;

(2) If the first day of the month is not on Monday, a null value is filled in front. Similarly, how does one fill in a null value at the end of the last day of the month, instead of Sunday? The goal is to keep the group length 7, that is, a week. In this way, you can use the flex layout method for rapid development;

(3) It also contains some restrictions, such as smaller than minDate, greater than maxDate, and no clicks.

(3) Switching months (1) last month

/*** Switch to the previous month */prevMonth () {if (this. prevMonthClick) {return;} this. prevMonthClick = true; setTimeout () => {this. prevMonthClick = false;}, 500); this. fadeXType = 'fadex _ prev'; // how to keep the current month from executing if (this. isMinLimitMonth () {return;} const {year, month} = this. showDate; // judge the current month. if it is already equal to 1 (1 is January, not February) if (month <= 1) {this. showDate. year = year-1; this. showDate. month = 12;} else {this. showDate. month-= 1 ;}},

SetTimeout () is used to automatically disappear after an animation is displayed. FadeXType is an animation type.

(2) next month

/*** Switch to the next month */nextMonth () {if (this. nextMonthClick) {return;} this. nextMonthClick = true; setTimeout () => {this. nextMonthClick = false;}, 500); this. fadeXType = 'fadex _ next'; // how to prevent the current month from being executed if (this. isMaxLimitMonth () {return;} const {year, month} = this. showDate; // judge the current month. if it is already 12 (12 is December) if (month> = 12) {this. showDate. year = year + 1; this. showDate. month = 1;} else {this. showDate. month + = 1 ;}},

The setTimeout () and prevMonth methods have the same principle.

Pay attention to the following features:

A. Because there are minDate and maxDate, the first consideration is that the limit cannot be exceeded.

B. consider changing the year after the month. When the month is greater than 12, the year is increased by 1 and the month is changed to 1.

(4) Select a year (1) Click the top year to display the year list.

OpenYearList () {if (this. showYear) {this. showYear = false; return;} const index = this. yearList. indexOf (this. selectDate. year); this. showYear = true; // open the year list and locate setTimeout () => {this. $ refs. yearList. scrollTop = (index-3) * 40 ;});},

(2) Select a year

SelectYear (value) {this. showYear = false; this. showDate. year = value; let type; // when the date is outside the minimum value, the month is replaced by the minimum value month, or when the date is outside the maximum value, the month is replaced by the maximum value month if (this. isMinLimitMonth () {type = 'copymindate';} else if (this. isMaxLimitMonth () {// when the date is out of the maximum value, replace the month with the maximum month type = 'copymaxdate';} if (type) {this. showDate. month = this [type]. month; this. showDate. day = this [type]. day; this. resetSelectDate (this. showDate. day); return ;} Let dayValue = this. selectDate. day; // judge whether the day is the maximum value to prevent another month from having this date if (this. selectDate. day> 28) {const months = (new Date (this. showDate. year, this. showDate. month, 0 )). getDate (); // if the current month does not have so many days, assign the maximum value of the current month to day dayValue = months <dayValue? Months: dayValue;} this. resetSelectDate (dayValue );},

Note the following when switching the Year:

A. consider minDate and maxDate, because if the selected month is January, but the limit is September, there is no problem in the year later than minDate (such as 2017, however, when the specific year (such as 2010) of minDate is reached, the minimum value of the Month can only be September, and the month needs to be modified. The same applies to maxDate.

B. How do you choose to change the day to 31? Since the year to be switched, this month is only 30 days, remember to change the day to the maximum value of this month, that is, 30.

(5) process raw data

In fact, this is the first step under normal circumstances, but I write steps according to my development habits. I usually write the function first, and the data is simulated. After the write is done, I will consider the original data format and the specific method for exposing the data, because this will not be changed, affects development and mood.

InitDatePicker () {this. showDate = {... this. splitDate (this. date, true)}; this. copyMinDate = {... this. splitDate (this. minDate)}; this. copyMaxDate = {... this. splitDate (this. maxDate)}; this. selectDate = {... this. showDate };}, splitDate (date, addStr) {let result ={}; const splitValue = date. split ('-'); try {if (! SplitValue | splitValue. length <3) {throw new Error ('time format incorrect ');} result = {year: Number (splitValue [0]), month: number (splitValue [1]), day: Number (splitValue [2]),}; if (addStr) {result. week = (new Date (result. year, result. month, result. day )). getDay () + 1; result. monthStr = monthJson [result. month]; result. weekStr = weekJson [result. week] ;}} catch (error) {console. error (error) ;}return result ;},

The purpose is:

A. process the raw data and check the raw data and cache it in json format to facilitate subsequent operations and display. Here I am only compatible with the YYYY-MM-DD format, others are not compatible, if you want to be compatible with other formats, you can modify its code, or use moment. other libraries such as js help you do this.

B. The split format is as follows:

year: '',month: '',day: '',week: '',weekStr: '',monthStr: '',

Summary

The above is a detailed explanation of the development of this component. If there is anything wrong, please point out criticism. If you think about it, it is not difficult, but trivial. Just be careful

All the animations here use the Vue transition. You can refer to the official website for details.

Well, the above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.