這篇文章主要介紹微信小程序中日歷組件的實現(xiàn)示例,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
站在用戶的角度思考問題,與客戶深入溝通,找到當涂網(wǎng)站設計與當涂網(wǎng)站推廣的解決方案,憑借多年的經驗,讓設計與互聯(lián)網(wǎng)技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都做網(wǎng)站、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務覆蓋當涂地區(qū)。
最近在做微信小程序項目,其中涉及到日歷。一直以來,遇到日歷,就是網(wǎng)上隨便找個插件,這次心血來潮,想著自己去實現(xiàn)一下。這次不是封裝功能強大,健碩完美的組件,只是記錄一下,主體思路。更多功能還得根據(jù)項目需要,自己去挖掘、實現(xiàn)。(大佬輕噴)
// 獲取某年某月總共多少天 getDateLen(year, month) { let actualMonth = month - 1; let timeDistance = +new Date(year, month) - +new Date(year, actualMonth); return timeDistance / (1000 * 60 * 60 * 24); },
當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。
// 獲取某月1號是周幾 getFirstDateWeek(year, month) { return new Date(year, month - 1, 1).getDay() },
// 獲取當月數(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 },
// 上月 年、月 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 },
[ {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} ]
以上是“微信小程序中日歷組件的實現(xiàn)示例”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站標題:微信小程序中日歷組件的實現(xiàn)示例
URL分享:http://www.muchs.cn/article18/ihpegp.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、響應式網(wǎng)站、定制開發(fā)、搜索引擎優(yōu)化、網(wǎng)頁設計公司、標簽優(yōu)化
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)