摘要:最近做小程序開發,出于練手,也是工作需要,就做了個微信小程序的類似于酒店預訂的日歷插件。計算每月第一天是星期幾日一二三四五六利用構造函數生成數據,一會用。
最近做小程序開發,出于練手,也是工作需要,就做了個微信小程序的類似于酒店預訂的日歷插件。
先上圖;
這個插件分為上下兩部分,上邊是tab欄,會根據當前的日期自動定位到當前,并展示以后7天的日期,下邊為內容展示,隨tab欄變化而變化。
思路:
首先用new Data()時間對象初始化時間,獲取當前的日期,用new Date(Date.UTC(year, month - 1, 1)).getDay()獲取每個月的第一天是星期幾。
// 計算每月第一天是星期幾 function getFirstDayOfWeek(year, month) { return new Date(Date.UTC(year, month - 1, 1)).getDay(); } const date = new Date(); const cur_year = date.getFullYear(); const cur_month = date.getMonth() + 1; const cur_date=date.getDate(); const weeks_ch = ["日", "一", "二", "三", "四", "五", "六"];
利用構造函數生成數據,一會用。
//利用構造函數創建對象 function calendar(date,week){ this.date=cur_year+"-"+cur_month+"-"+date; if(date==cur_date){ this.week = "今天"; }else if(date==cur_date+1){ this.week = "明天"; }else{ this.week = "星期" + week; } }
使用for循環生成json數據:
for(var i=1;i<=monthLength;i++){ //當循環完一周后,初始化再次循環 if(x>6){ x=0; } //利用構造函數創建對象 that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0]) x++; }
這里因為一周有7天,所以當x>6的時候,重置為0。
最后展示部分源碼
var that=this; function getThisMonthDays(year, month) { return new Date(year, month, 0).getDate(); } // 計算每月第一天是星期幾 function getFirstDayOfWeek(year, month) { return new Date(Date.UTC(year, month - 1, 1)).getDay(); } const date = new Date(); const cur_year = date.getFullYear(); const cur_month = date.getMonth() + 1; const cur_date=date.getDate(); const weeks_ch = ["日", "一", "二", "三", "四", "五", "六"]; //利用構造函數創建對象 function calendar(date,week){ this.date=cur_year+"-"+cur_month+"-"+date; if(date==cur_date){ this.week = "今天"; }else if(date==cur_date+1){ this.week = "明天"; }else{ this.week = "星期" + week; } } //當前月份的天數 var monthLength= getThisMonthDays(cur_year, cur_month) //當前月份的第一天是星期幾 var week = getFirstDayOfWeek(cur_year, cur_month) var x = week; for(var i=1;i<=monthLength;i++){ //當循環完一周后,初始化再次循環 if(x>6){ x=0; } //利用構造函數創建對象 that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0]) x++; } //限制要渲染的日歷數據天數為7天以內(用戶體驗) var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7) that.setData({ calendar: flag }) //設置scroll-view的子容器的寬度 that.setData({ width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7) })
插件地址:github地址
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/94609.html
摘要:最近在做微信小程序項目,其中涉及到日歷。其次,弄清楚每月一號對應的是周幾。當月天數已知,上月殘余天數,我們可以用當月號是周幾來推斷出來,下月殘余天數,正好用當月天數上月殘余。 最近在做微信小程序項目,其中涉及到日歷。一直以來,遇到日歷,就是網上隨便找個插件,這次心血來潮,想著自己去實現一下。這次不是封裝功能強大,健碩完美的組件,只是記錄一下,主體思路。更多功能還得根據項目需要,自己去挖...
摘要:一前言最近公司要做一個酒店入住的小程序,不可避免的一定會使用到日歷,而小程序沒有內置的日歷組件。二代碼原理分析寫一個日歷只需要知道兩件事情一個月有多少天每個月的第一天是星期幾。 一、前言 最近公司要做一個酒店入住的小程序,不可避免的一定會使用到日歷,而小程序沒有內置的日歷組件。在網上看了一下也沒有非常適合需求的日歷,于是自己寫了一個。 二、代碼 1. 原理分析 寫一個日歷只需要知道兩件...
閱讀 3295·2021-11-23 09:51
閱讀 948·2021-09-03 10:30
閱讀 3221·2021-08-31 09:40
閱讀 3282·2019-08-30 14:22
閱讀 907·2019-08-30 14:09
閱讀 2907·2019-08-30 13:21
閱讀 3244·2019-08-28 18:03
閱讀 2864·2019-08-26 13:44