摘要:最近在做微信小程序項目,其中涉及到日歷。其次,弄清楚每月一號對應的是周幾。當月天數(shù)已知,上月殘余天數(shù),我們可以用當月號是周幾來推斷出來,下月殘余天數(shù),正好用當月天數(shù)上月殘余。
最近在做微信小程序項目,其中涉及到日歷。一直以來,遇到日歷,就是網(wǎng)上隨便找個插件,這次心血來潮,想著自己去實現(xiàn)一下。這次不是封裝功能強大,健碩完美的組件,只是記錄一下,主體思路。更多功能還得根據(jù)項目需要,自己去挖掘、實現(xiàn)。(大佬輕噴)思路分析
首先最主要的一點,就是要計算出某年某月有多少天,其中涉及到大小月,閏、平年二月。
其次,弄清楚每月一號對應的是周幾。
然后,有時為填充完整,還需顯示上月殘余天數(shù)以及下月開始幾天,這些又該如何展示。
最后,根據(jù)自己項目需求實現(xiàn)其它細枝末節(jié)。
計算每月天數(shù)按照一般思路,[1,3,5,7,8,10,12]這幾個月是31天,[2,3,6,9,11]這幾個月是30天,閏年2月29天,平年2月28天。每次需要計算天數(shù)時,都得如此判斷一番。方案可行,而且也是大多數(shù)人的做法。但是,這個方法,我卻覺得有些繁瑣。
其實換一種思路,也未嘗不可。時間戳就是一個很好的載體。當前月一號零時的時間戳,與下月一號零時的時間戳之差,不就是當前月天數(shù)的毫秒數(shù)嘛。
// 獲取某年某月總共多少天 getDateLen(year, month) { let actualMonth = month - 1; let timeDistance = +new Date(year, month) - +new Date(year, actualMonth); return timeDistance / (1000 * 60 * 60 * 24); },
看到上述代碼,你可能會問,是不是還缺少當月為12月時的特殊判斷,畢竟涉及到跨年問題。當然,你無需擔心,根據(jù)MDN中關于Date的表述,js已經(jīng)為我們考慮好了這一點
當Date作為構造函數(shù)調用并傳入多個參數(shù)時,如果數(shù)值大于合理范圍時(如月份為13或者分鐘數(shù)為70),相鄰的數(shù)值會被調整。比如 new Date(2013, 13, 1)等于new Date(2014, 1, 1),它們都表示日期2014-02-01(注意月份是從0開始的)。其他數(shù)值也是類似,new Date(2013, 2, 1, 0, 70)等于new Date(2013, 2, 1, 1, 10),都表示時間2013-03-01T01:10:00。計算每月一號是周幾
呃,這個就不需要說了吧,getDay()你值得擁有
// 獲取某月1號是周幾 getFirstDateWeek(year, month) { return new Date(year, month - 1, 1).getDay() },每個月的數(shù)據(jù)如何展示
如果只是簡單展示當月數(shù)據(jù),那還是很簡單的,獲取當月天數(shù),依次遍歷,就可以拿到當月所有數(shù)據(jù)。
// 獲取當月數(shù)據(jù),返回數(shù)組 getCurrentArr(){ let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 獲取當月天數(shù) let currentMonthDateArr = [] // 定義空數(shù)組 if (currentMonthDateLen > 0) { for (let i = 1; i <= currentMonthDateLen; i++) { currentMonthDateArr.push({ month: "current", // 只是為了增加標識,區(qū)分上下月 date: i }) } } this.setData({ currentMonthDateLen }) return currentMonthDateArr },
很多時候,為了顯示完整,需要顯示上下月的殘余數(shù)據(jù)。一般來說,日歷展示時,最大是7 X 6 = 42位,為啥是42位,呃,自己去想想吧。當月天數(shù)已知,上月殘余天數(shù),我們可以用當月1號是周幾來推斷出來,下月殘余天數(shù),正好用42 - 當月天數(shù) -上月殘余。
// 上月 年、月 preMonth(year, month) { if (month == 1) { return { year: --year, month: 12 } } else { return { year: year, month: --month } } },
// 獲取當月中,上月多余數(shù)據(jù),返回數(shù)組 getPreArr(){ let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 當月1號是周幾 == 上月殘余天數(shù)) let preMonthDateArr = [] // 定義空數(shù)組 if (preMonthDateLen > 0) { let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 獲取上月 年、月 let date = this.getDateLen(year, month) // 獲取上月天數(shù) for (let i = 0; i < preMonthDateLen; i++) { preMonthDateArr.unshift({ // 尾部追加 month: "pre", // 只是為了增加標識,區(qū)分當、下月 date: date }) date-- } } this.setData({ preMonthDateLen }) return preMonthDateArr },
// 下月 年、月 nextMonth(year, month) { if (month == 12) { return { year: ++year, month: 1 } } else { return { year: year, month: ++month } } },
// 獲取當月中,下月多余數(shù)據(jù),返回數(shù)組 getNextArr() { let nextMonthDateLen = 42 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天數(shù) let nextMonthDateArr = [] // 定義空數(shù)組 if (nextMonthDateLen > 0) { for (let i = 1; i <= nextMonthDateLen; i++) { nextMonthDateArr.push({ month: "next",// 只是為了增加標識,區(qū)分當、上月 date: i }) } } return nextMonthDateArr },
整合三組數(shù)據(jù),就得到了完整的當月數(shù)據(jù),格式如下
[ {month: "pre", date: 30}, {month: "pre", date: 31}, {month: "current", date: 1}, {month: "current", date: 2}, ... {month: "current", date: 31}, {month: "next", date: 1}, {month: "next", date: 2} ]
至于上下月切換,選擇某年某月等功能,無非就是參數(shù)變化而已,自己琢磨琢磨即可。
骨架都有了,你想創(chuàng)造什么樣的功能還不是手到擒來。
完整代碼 GitHub文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97289.html
摘要:一前言最近公司要做一個酒店入住的小程序,不可避免的一定會使用到日歷,而小程序沒有內置的日歷組件。二代碼原理分析寫一個日歷只需要知道兩件事情一個月有多少天每個月的第一天是星期幾。 一、前言 最近公司要做一個酒店入住的小程序,不可避免的一定會使用到日歷,而小程序沒有內置的日歷組件。在網(wǎng)上看了一下也沒有非常適合需求的日歷,于是自己寫了一個。 二、代碼 1. 原理分析 寫一個日歷只需要知道兩件...
摘要:最近做小程序開發(fā),出于練手,也是工作需要,就做了個微信小程序的類似于酒店預訂的日歷插件。計算每月第一天是星期幾日一二三四五六利用構造函數(shù)生成數(shù)據(jù),一會用。 最近做小程序開發(fā),出于練手,也是工作需要,就做了個微信小程序的類似于酒店預訂的日歷插件。先上圖;showImg(https://segmentfault.com/img/bV9qoI?w=374&h=640); 這個插件分為上下兩部...
摘要:組件三要素組件的三要素就是小程序定義的三種文件因為本身就是模塊化開發(fā),所以這天然有利于組件化。日歷組件所以利用和就可以打造一款組件了。這樣就完成了一個組件編寫,任何需要用到的地方都可以引入了。 背景 先談下背景,在做一款產品的時候需要用到日期選擇器,但是官方的卻不太滿足需求,因為無法選擇農歷啊。所以自己來造一個輪子好了,造輪子之前先想想啊,萬一以后多個地方要用到,多個項目要用,怎么辦呢...
閱讀 2791·2021-11-17 09:33
閱讀 4454·2021-09-22 15:57
閱讀 2866·2019-08-30 14:16
閱讀 3133·2019-08-29 14:07
閱讀 2413·2019-08-26 11:55
閱讀 3415·2019-08-23 17:07
閱讀 1725·2019-08-23 16:50
閱讀 2535·2019-08-23 16:08