之前項(xiàng)目中有用到日歷控件,當(dāng)時(shí)由于時(shí)間問(wèn)題,是在網(wǎng)上找到一個(gè)demo,然后二次開(kāi)發(fā)的,從那時(shí)就想著自己寫(xiě)一個(gè)日歷控件。這篇文章說(shuō)明日歷數(shù)據(jù)的處理,去除月份天數(shù)判斷以及是否閏年判斷。
創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)牟定,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108
設(shè)計(jì)(以最常用的按月份的日歷)
日歷其實(shí)大家都很熟悉,一切的設(shè)計(jì)都是從功能出發(fā),這是根本。日歷的功能分為兩大塊。
功能點(diǎn)
首先思考日歷的核心問(wèn)題
如何獲取當(dāng)前日期的年份以及月份
/** * 獲取日歷header內(nèi)容 格式為:****年 **月 * @param {*} date */ export const getHeaderContent = function (date) { let _date = new Date(date) return dateFormat(_date, 'yyyy年 MM月') }
如何獲取當(dāng)前月份需要顯示的42條數(shù)據(jù)(6*7),這42條數(shù)據(jù)是什么呢?
這個(gè)問(wèn)題的核心是:當(dāng)前月份顯示的42條數(shù)據(jù)的第一天是哪一天?
這個(gè)問(wèn)題的解決思路還要從上面的設(shè)計(jì)說(shuō)起,上面提到日歷主題的行數(shù)時(shí),說(shuō)到“假設(shè)當(dāng)前月的第一天為上一月最后一周的最后一天”,那么42條數(shù)據(jù)顯示的內(nèi)容的第一條數(shù)據(jù)還要根據(jù)當(dāng)前月的第一天是第一天所在周的第幾天。
舉例:2019-02-01
2月的第一天,星期五,所以當(dāng)前月日歷的第一天為2019-02-01 - 5
var date = new Date() date.setDate(date.getDate() - date.getDay() + 1) // 獲取當(dāng)前月的第一天為2019-01-28
這里有一問(wèn)題是什么呢?
date.getDate()的值為0 - 6(0為周日,如果你的日歷也是將周日放在日歷的第一天,沒(méi)什么問(wèn)題,可是在中國(guó)是將周日放在最后一天的),這也就意味著前面的實(shí)現(xiàn)還需要考慮日歷的放置順序,因?yàn)槿諝v是按照普通的周一到周日,還是周日到周一,我們獲取的當(dāng)月日歷的第一天是不同的。所以上面的代碼還要依賴于日歷的排放順序。
這里的排放順序?qū)⑹侨諝v組件的第一個(gè)可被調(diào)用者控制的參數(shù)。這里我的設(shè)想是將該參數(shù)的傳入值與date.getDay()匹配。
所以上面的公式為
date.setDate(date.getDate() - date.getDay() + x)
但是這里的x值加了之后的日期如果大于當(dāng)前月份的第一天,那就需要將當(dāng)前得到的日期數(shù)值再減去7天,這個(gè)原因就不用說(shuō)明了吧。
/** * 獲取當(dāng)前月日歷的第一天 * @param {*} date */ export const getFirstDayOfCalendar = function (date, weekLabelIndex) { let _date = new Date(date) _date = new Date(_date.setDate(_date.getDate() - _date.getDay() + weekLabelIndex)) // 如果當(dāng)前日期大于當(dāng)前月第一天,則需要減去7天 if (_date > date) { _date = new Date(_date.setDate(_date.getDate() - 7)) } return _date }
接下來(lái)就好做了,只需要在當(dāng)前的日期加上加上1,每次得到下一天的日期。
左右切換月份如何設(shè)定
上面設(shè)計(jì)都是以今天為計(jì)算初始值,左右切換的初始值如何設(shè)計(jì)呢?
第一反應(yīng)是將當(dāng)前的日期的月份進(jìn)行加減1,這樣是不行的,因?yàn)槿绻裉焓?1號(hào),那么碰到下個(gè)月只有30的時(shí)候,這樣就會(huì)碰到點(diǎn)擊下月,直接切換了兩個(gè)月。更別說(shuō)2月這個(gè)月份天數(shù)不固定的月份。所以這里又是一個(gè)問(wèn)題了。
我的解決思路是:月份點(diǎn)擊切換的時(shí)候,初始計(jì)算值設(shè)計(jì)為當(dāng)前月的第一天。
/** * 以傳入?yún)?shù)作為基準(zhǔn)獲取下個(gè)月的第一天日期 * @param {*} firstDayOfCurrentMonth */ export const getFirstDayOfNextMonth = function (firstDayOfCurrentMonth) { return new Date(firstDayOfCurrentMonth.getFullYear(), firstDayOfCurrentMonth.getMonth() + 1, 1) } /** * 以傳入?yún)?shù)作為基準(zhǔn)獲取上個(gè)月的第一天日期 * @param {*} firstDayOfCurrentMonth */ export const getFirstDayOfPrevMonth = function (firstDayOfCurrentMonth) { return new Date(firstDayOfCurrentMonth.getFullYear(), firstDayOfCurrentMonth.getMonth() - 1, 1) }
左右切換月份數(shù)據(jù)傳遞方式(觀察者模式)
因?yàn)閷?duì)于日歷組件本身來(lái)說(shuō),header和body是屬于同一個(gè)父組件的同級(jí)組件,數(shù)據(jù)傳遞可以依賴于父組件進(jìn)行傳遞,這里我使用的是觀察者模式實(shí)現(xiàn)。
引入觀察者模式代碼:
/* * Subject * 內(nèi)部創(chuàng)建了三個(gè)方法,內(nèi)部維護(hù)了一個(gè)ObserverList。 */ // contructor function export const Subject = function () { this.observers = new ObserverList() } // addObserver: 調(diào)用內(nèi)部維護(hù)的ObserverList的add方法 Subject.prototype.addObserver = function (observer) { this.observers.add(observer) } // removeObserver: 調(diào)用內(nèi)部維護(hù)的ObserverList的removeat方法 Subject.prototype.removeObserver = function (observer) { this.observers.removeAt(this.observers.indexOf(observer, 0)) } // notify: 通知函數(shù),用于通知觀察者并且執(zhí)行update函數(shù),update是一個(gè)實(shí)現(xiàn)接口的方法,是一個(gè)通知的觸發(fā)方法。 Subject.prototype.notify = function (context) { let observerCount = this.observers.count() for (let i = 0; i < observerCount; i++) { this.observers.get(i).update(context) } } /* * ObserverList * 內(nèi)部維護(hù)了一個(gè)數(shù)組,4個(gè)方法用于數(shù)組的操作,這里相關(guān)的內(nèi)容還是屬于subject,因?yàn)镺bserverList的存在是為了將subject和內(nèi)部維護(hù)的observers分離開(kāi)來(lái),清晰明了的作用。 */ function ObserverList () { this.observerList = [] } ObserverList.prototype.add = function (obj) { return this.observerList.push(obj) } ObserverList.prototype.count = function () { return this.observerList.length } ObserverList.prototype.get = function (index) { if (index > -1 && index < this.observerList.length) { return this.observerList[index] } } ObserverList.prototype.indexOf = function (obj, startIndex) { let i = startIndex while (i < this.observerList.length) { if (this.observerList[i] === obj) { return i } i++ } return -1 } ObserverList.prototype.removeAt = function (index) { this.observerList.splice(index, 1) } /* * The Observer * 提供更新接口,為想要得到通知消息的主體提供接口。 */ export const Observer = function () { this.update = function () { // ... } }
CalendarBody觀察者注冊(cè):
CalendarHeader通知消息
組件設(shè)計(jì)以及結(jié)構(gòu)
VueCalendar Component CalendarBody.vue CalendarHeader.vue lib Subject.js Util.js index.vue
當(dāng)前效果
周一為第一天:
周日為第一天
Github地址
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁(yè)名稱:親自動(dòng)手實(shí)現(xiàn)vue日歷控件
網(wǎng)站URL:http://www.rwnh.cn/article22/ihjgcc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站制作、搜索引擎優(yōu)化、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)