原生微信小程序?qū)崿F(xiàn)打卡日歷組件

背景：最近接了個外包，其中有個打卡功能躺屁，里面包含了一個日歷，甲方要求百分百還原经宏，閑暇之余就擼了一下，下面是效果圖 源碼地址 https://github.com/chenxuba/xx-calendar 求star ?
image.png
分析：
  • 要求左右箭頭可切換上下月;
  • 需要展示農(nóng)歷日歷；
  • 點(diǎn)擊日期拿到年月日（yyyy-mm-dd）
  • 樣式一比一還原
想法??：網(wǎng)上都沒一毛一樣的組件凝果，那還想個der牙丽，自己擼一個啊～
組件我起名：xx-calendar
  • 第一步：在小程序components目錄下新建一個組件xx-calendar
image.png
  • 第二步：在你想要引入的頁面的xxx.json文件里引入該組件
{
  "usingComponents": {
      "xx-calendar":"../../components/xx-calendar/xx-calendar"
  }
}
  • 第三步：在xxx.wxml里使用該組件
<xx-calendar></xx-calendar>
  • 第三步：前端寫頁面除盏，啥都不要想，先擼樣式，靜態(tài)頁面擼起走～
  • 3.1 先擼頭部
image.png
  • xx-calendar.wxml
<!--components/xx-calendar/xx-calendar.wxml-->
<!-- 頭部 -->
<view class="title-wrap">
    <view class="change-date">
        <view class="prev">
            <image src="./prev.png" mode="" />
        </view>
        <view class="year-mouth">
            2023年 1月
        </view>
        <view clstyle="next">
            <image src="./next.png" mode="" />
        </view>
    </view>
    <view class="week">
        <text>日</text>
        <text>一</text>
        <text>二</text>
        <text>三</text>
        <text>四</text>
        <text>五</text>
        <text>六</text>
    </view>
</view>
<!-- 日期 -->
<view class="date-wrap">
    <!-- 上個月日期 -->
    <view class="mouth-date last-mouth">
        <text class="day-text">29</text>
        <text class="day-nongli">十五</text>
        <text class="day-dot"></text>
    </view>
    <view class="mouth-date last-mouth">
        <text class="day-text">30</text>
        <text class="day-nongli">十六</text>
        <text class="day-dot"></text>
    </view>
    <view class="mouth-date last-mouth">
        <text class="day-text">31</text>
        <text class="day-nongli">十七</text>
        <text class="day-dot"></text>
    </view>
    <!-- 當(dāng)月日期 -->
    <view class="mouth-date current-mouth" wx:for="{{31}}">
       <view class="day-box {{index==0?'active':''}}">
        <text class="day-text {{index==2||index==4||index==6||index==8?'color':''}}">{{index+1}}</text>
        <text class="day-nongli">十八</text>
        <text class=" {{index==2||index==4||index==6||index==8?'day-dot':'not-dot'}}"></text>
       </view>
    </view>
    <!-- 下個月日期 -->
    <view class="mouth-date next-mouth">
        <text class="day-text">1</text>
        <text class="day-nongli">十五</text>
        <text class="day-dot"></text>
    </view>
</view>
  • xx-calendar.wxss
/* components/xx-calendar/xx-calendar.wxss */
/* 頭部樣式start */
.title-wrap{
    background-color: #fff;
    padding-top: 20rpx;
    border-bottom: 1px solid #D4DBDC;
    padding-bottom: 10rpx;
}
.change-date{
    display: flex;
    justify-content: center;
    align-items: center;
}
.change-date image{
    width: 50rpx;
    height: 50rpx;
    transform: scale(1.5);
    display: flex;
}
.year-mouth{
    margin: 0 60rpx;
}
.week{
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    margin-top: 30rpx;
    color: #1F1F1F;
}
.week text{
    flex: 1;
    text-align: center;
}
/* 頭部樣式end */
/* 日期區(qū)域樣式start */
.date-wrap{
    height: 500rpx;
    background-color: #F8F9F9;
    display: flex;
    flex-wrap: wrap;
}
.mouth-date{
    display: flex;
    font-size: 24rpx;
    flex-direction: column;
    align-items: center;
    width: calc(100% / 7);
    border-bottom: 1rpx solid rgb(229, 234, 235);
    padding-top: 10rpx;
}
.last-mouth text,.next-mouth text{
    opacity: 0;
}
.mouth-date .day{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #1F1F1F;

}
.mouth-date  .day-nongli{
    font-size: 18rpx;
    color: #888888;
    margin-bottom: 6rpx;
}
.mouth-date .color{
    color: #8096F0;
}
.mouth-date  .day-dot{
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background-color: #8096F0;
}
.mouth-date .day-box{
    border-radius: 10rpx;
    width: 80rpx;
    padding-top: 6rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mouth-date .active{
    background-color: #A1D7EE;
}
.mouth-date .active text{
    color: #fff;
}
.mouth-date .active .day-text{
    font-weight: 600;
}
.not-dot{
    width: 8rpx;
    height: 8rpx;
}
  • 樣式寫完就是下面這個樣子了，注意：??css和dom后面還會根據(jù)實(shí)際情況微調(diào)
image.png
  • 選中狀態(tài)和已打卡樣式都暫時是根據(jù)索引模擬出來的暇矫，農(nóng)歷日期也不對
  • 下面就來寫js，獲取上個月日期數(shù)組择吊、當(dāng)月日期數(shù)組和下個月日期數(shù)組
  • 農(nóng)歷暫時先放一放
  • 下面先來寫三個方法李根，分別來 獲取上個月日期、當(dāng)月日期和下個月日期
  • xx-calendar.js
  • 點(diǎn)定義好本月的年月几睛，渲染日歷頭部房轿，并且把星期也換成變量，即：
data:{
   year: new Date().getFullYear(),
   month: new Date().getMonth() + 1,
   weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
}
  • 在日歷dom處渲染這三個變量
image.png
image.png
  • 下面在data里再定義幾個變量所森，用來存儲日期
data:{
        nowMonth: new Date().getMonth() + 1, //本月是幾月
        nowDay: new Date().getDate(), //本月當(dāng)天的日期
        lastMonthDays: [], //上一個月
        nowMonthDays: [], //本月 
        nextMonthDays: [], //下一個月
}
  • 在methods里定義三個方法
 /**
     * 組件的方法列表
     */
    methods: {
        /** 獲取上個月日期 */
        getLastMonthDays(year,month){},
       /** 獲取當(dāng)月日期 */
        getNowMonthDays(year, month) {},
        /** 獲取下個月日期 */
        getNextMonthDays(year, month) {},
    }
  • 為了方便調(diào)用囱持，寫一個總方法，一并調(diào)用這三個方法焕济，并在ready里調(diào)用這個總方法纷妆，傳入year和month，邏輯需要吼蚁，還要寫一個獲取當(dāng)月天數(shù)的方法
 /**
     * 組件的方法列表
     */
    methods: {
         //獲取當(dāng)月天數(shù)
        getThisMonthDays(year, month) {
            return new Date(year, month, 0).getDate();
        },
        /** 總方法 */
        //創(chuàng)建日期
        createDays(year, month) {
            this.getLastMonthDays(year, month)
            this.getNowMonthDays(year, month)
            this.getNextMonthDays(year, month)
        },
        /** 獲取上個月日期 */
        getLastMonthDays(year, month) {},
       /** 獲取當(dāng)月日期 */
        getNowMonthDays(year, month) {},
        /** 獲取下個月日期 */
        getNextMonthDays(year, month) {},
    },
    ready(){
        let { year,month } = this.data
        this.createDays(year,month)
    }
  • 接下來凭需，先寫獲取上個月日期的方法，如下：
/** 獲取上個月日期 */
        getLastMonthDays(year, month) {
            let nowMonthFirstDays = new Date(year, month - 1, 1).getDay()
            let lastMonthDays = []
            if (nowMonthFirstDays) { //判斷當(dāng)月的第一天是不是星期天
                //上個月顯示多少天
                let lastMonthNums = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //判斷是否會跨年
                //上個月從幾號開始顯示
                for (let i = lastMonthNums - nowMonthFirstDays + 1; i <= lastMonthNums; i++) {
                    let time = new Date(year, month - 2, i).toLocaleDateString() //對應(yīng)的時間
                    lastMonthDays.push({
                        date: i, //幾號
                        week: this.data.weeksArr[new Date(year, month - 2, i).getDay()], //星期幾
                        time,
                        isNowMonthDay: ''
                    });
                }
            }
            this.setData({
                lastMonthDays
            })
            console.log(lastMonthDays);
        },
  • 打印結(jié)果可以看到 肝匆，已經(jīng)拿到上個月的日期已經(jīng)對應(yīng)的數(shù)據(jù)
  • ??：安卓手機(jī)上會存在bug，寫法造成的顺献，解決方法我放到文章最后
image.png
  • 上個月的日期已經(jīng)拿到了旗国，下面可以在dom里渲染這個【lastMonthDays】數(shù)組了
image.png
  • 下面在編寫獲取當(dāng)月日期的方法
 getNowMonthDays(year, month) {
            let {
                nowMonth,
                nowDay
            } = this.data
            let nowMonthDays = []
            let days = this.getThisMonthDays(year, month); //獲取當(dāng)月的天數(shù)
            for (let i = 1; i <= days; i++) {
                let d = new Date(year, month - 1, i)
                let years = d.getFullYear()
                let months = d.getMonth() + 1
                let day = d.getDate()
                let time = `${years+'/'+months +'/'+day}` // 2023/3/3
                nowMonthDays.push({
                    date: i, //幾號
                    week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期幾
                    time,
                    color: false, //為已打卡日期樣式做準(zhǔn)備
                    day, //后面會改成農(nóng)歷
                    isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : ""
                });
            }
            this.setData({
                nowMonthDays
            })
            console.log(nowMonthDays);
        },
  • 打印可以拿到當(dāng)月的所有日期數(shù)組，主要圈出來的注整，默認(rèn)選中當(dāng)天的日期
image.png

  • 日期數(shù)組拿到了能曾，當(dāng)天的選中狀態(tài)條件也拿到了，下面微調(diào)下dom肿轨，渲染【nowMonthDays】和完善默認(rèn)選中條件


    image.png
  • 在接下來寿冕，編寫獲取下個月的日期方法
/** 獲取下個月日期 */
        getNextMonthDays(year, month) {
            let {
                lastMonthDays,
                nowMonthDays,
            } = this.data
            let nextMonthDays = []
            let nextMonthNums = (lastMonthDays.length + nowMonthDays.length) > 35 ? 42 - (lastMonthDays.length + nowMonthDays.length) : 35 - (lastMonthDays.length + nowMonthDays.length) //下個月顯示多少天
            let nowYear = (parseInt(month) + 1) > 12 ? year + 1 : year //下一個月的年份
            let nowMonth = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1 //下一個月的月份
            if (nextMonthNums) { //判斷當(dāng)前天數(shù)是否大于零
                for (let i = 1; i <= nextMonthNums; i++) {
                    let time = new Date(year, month - 1, i).toLocaleDateString()
                    nextMonthDays.push({
                        date: i, //幾號
                        week: this.data.weeksArr[new Date(nowYear, nowMonth - 1, i).getDay()], //星期幾
                        time,
                        isNowMonthDay: ''
                    });
                }
            }
            this.setData({
                nextMonthDays
            })
            console.log(nextMonthDays)
        },
  • 打印數(shù)組
image.png
  • 下面渲染這個【nextMonthDays】數(shù)組
image.png
  • 還沒渲染農(nóng)歷的樣子，就是下圖
image.png
  • 下面渲染農(nóng)歷椒袍，需要用到一個公共方法驼唱，這個方法很復(fù)雜，也很長驹暑，就不再這里展示了玫恳，你可以訪問我的github倉庫下載源碼獲取這個方法. https://github.com/chenxuba/xx-calendar
  • 頁面內(nèi)引入這個js
import calendarFormatter from "./index";
  • 需要修改的是獲取當(dāng)月日期的這個方法辨赐，上下月都不展示，就不修改其他倆方法了京办，如果你需要請自行二開
 getNowMonthDays(year, month) {
            let {
                nowMonth,
                nowDay
            } = this.data
            let nowMonthDays = []
            let days = this.getThisMonthDays(year, month); //獲取當(dāng)月的天數(shù)
            for (let i = 1; i <= days; i++) {
                let d = new Date(year, month - 1, i)
                let years = d.getFullYear()
                let months = d.getMonth() + 1
                let day2 = d.getDate()
                let time = `${years+'/'+months +'/'+day2}` // 2023/3/3
                let timer = time.replace(/\//g, "-")
                let timer2 = timer.split('-')
                var day = calendarFormatter.solar2lunar(timer2[0], timer2[1], timer2[2]);
                let newdate
                if (day.IDayCn == '初一') {
                    newdate = day.IMonthCn
                } else {
                    newdate = day.IDayCn
                }
                nowMonthDays.push({
                    date: i, //幾號
                    week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期幾
                    time,
                    color: false,
                    day: newdate,
                    isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : ""
                });
            }
            this.setData({
                nowMonthDays
            })
            console.log(nowMonthDays);
        },
嗯～實(shí)現(xiàn)了
image.png
  • 下面在實(shí)現(xiàn)點(diǎn)擊左右箭頭切換月份
image.png
/** 切換月份 */
        changeMonthFun(e){
            let {
                year,
                month
            } = this.data
            let type = e.currentTarget.dataset.type //類型
            if (type == 'prev') { //上一個月
                year = month - 1 > 0 ? year : year - 1
                month = month - 1 > 0 ? month - 1 : 12
            } else { //next 下個月
                year = (parseInt(month) + 1) > 12 ? year + 1 : year
                month = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1
            }
            this.setData({
                year,
                month,
            })
            this.createDays(year, month)
        }
  • 這樣就實(shí)現(xiàn)了切換月份
image.png
  • 有點(diǎn)小瑕疵掀序，不打緊，之前寫靜態(tài)頁面的時候固定高度了惭婿，注釋掉就可以了
image.png
  • 一切正常
image.png
  • 下面在實(shí)現(xiàn)點(diǎn)擊日期不恭，拿到當(dāng)前年月日
selectDate(e){
            let type = e.currentTarget.dataset.type //選擇的時間類型
            let index = e.currentTarget.dataset.index //選擇的下標(biāo)
            let date = e.currentTarget.dataset.item.time //選擇的下標(biāo)
            let selectDate = date.replace(/\//g, "-")
            console.log("選擇的時間", selectDate)
            // 自定義事件，父組件調(diào)用财饥，回調(diào) 選擇的時間selectDate
            this.triggerEvent('selectDate', selectDate)
             //將選擇的時間類型的 isNowMonthDay 全改為''
             this.data[type]?.forEach(item => {
                item.isNowMonthDay = ''
            })
            this.data[type]?.forEach((item, idx) => {
                if (index == idx) {
                    item.isNowMonthDay = (item.time == new Date().toLocaleDateString() ? "isNowMonthDay" : "isNotNowMonthDay"); //判斷當(dāng)前選中的日期是否是當(dāng)前時間
                } else {
                    item.isNowMonthDay = ''
                }
            })
            this.setData({
                [type]: this.data[type],
            })
        },
image.png

  • 最后實(shí)現(xiàn) 已打卡日期的樣式展示县袱，要從父組件接收一個已打卡日期數(shù)組，通過對比當(dāng)月日期佑力，來動態(tài)改變之前備用的color字段

  • 先接收一個數(shù)組
  /**
     * 組件的屬性列表
     */
    properties: {
        use_date_arr:{
            type:Array,
            value:[]
        }
    },
  • 然后修改getNowMonthDays方法
 this.data.use_date_arr.forEach(ele => {
                ele = ele.replace(/\-/g, "/")
                nowMonthDays.forEach(item => {
                    if (ele == item.time) {
                        console.log(item);
                        item.color = true
                    }
                })
            })
image.png
  • 然后在父組件傳入這個use_date_arr數(shù)組
data: {
    use_date_arr:['2023-3-1','2023-3-2','2023-3-3','2023-3-5','2023-3-8']
  },

<xx-calendar use_date_arr="{{use_date_arr}}"></xx-calendar>
  • 最后的效果
image.png
  • 取消高度導(dǎo)致圓點(diǎn)沒距離了式散，稍微微調(diào)下
image.png
  • 搞定
image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市打颤，隨后出現(xiàn)的幾起案子暴拄，更是在濱河造成了極大的恐慌，老刑警劉巖编饺，帶你破解...
    沈念sama閱讀 218,755評論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件乖篷，死亡現(xiàn)場離奇詭異，居然都是意外死亡透且，警方通過查閱死者的電腦和手機(jī)撕蔼，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來秽誊，“玉大人鲸沮，你說我怎么就攤上這事」郏” “怎么了讼溺？”我有些...
    開封第一講書人閱讀 165,138評論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長最易。 經(jīng)常有香客問我怒坯，道長，這世上最難降的妖魔是什么藻懒？ 我笑而不...
    開封第一講書人閱讀 58,791評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任剔猿，我火速辦了婚禮，結(jié)果婚禮上嬉荆，老公的妹妹穿的比我還像新娘归敬。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布弄慰。 她就那樣靜靜地躺著第美，像睡著了一般。 火紅的嫁衣襯著肌膚如雪陆爽。 梳的紋絲不亂的頭發(fā)上什往，一...
    開封第一講書人閱讀 51,631評論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音慌闭，去河邊找鬼别威。 笑死，一個胖子當(dāng)著我的面吹牛驴剔，可吹牛的內(nèi)容都是我干的省古。 我是一名探鬼主播，決...
    沈念sama閱讀 40,362評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼丧失，長吁一口氣：“原來是場噩夢啊……” “哼豺妓！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起布讹，我...
    開封第一講書人閱讀 39,264評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤琳拭，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后描验，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體白嘁，經(jīng)...
    沈念sama閱讀 45,724評論 1贊 315
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年膘流，在試婚紗的時候發(fā)現(xiàn)自己被綠了絮缅。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,040評論 1贊 350
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡呼股，死狀恐怖耕魄，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情卖怜，我是刑警寧澤屎开，帶...
    沈念sama閱讀 35,742評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站马靠，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏蔼两。R本人自食惡果不足惜甩鳄，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望额划。 院中可真熱鬧妙啃，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0贊 22
  • 一樁弒父案馆匿，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至燥滑，卻和暖如春渐北，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背铭拧。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工赃蛛， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人搀菩。 一個月前我還...
    沈念sama閱讀 48,247評論 3贊 371
  • 代替公主和親
    正文 我出身青樓呕臂，卻偏偏與公主長得像，于是被迫代替她去往敵國和親肪跋。 傳聞我的和親對象是個殘疾皇子歧蒋，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評論 2贊 355

推薦閱讀更多精彩內(nèi)容