vue實現(xiàn)日歷組件

更新時間：2022年04月18日 09:46:55 作者：zxb89757

這篇文章主要為大家詳細介紹了vue實現(xiàn)日歷組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

基于VUE實現(xiàn)日歷組件，供大家參考，具體內(nèi)容如下

年和月份是使用輸入框來切換的，沒有做成選擇框，??和??切換月份，紅色選取是選取的日期
實現(xiàn)思路和網(wǎng)上的大多數(shù)一樣，首先是把月份的天數(shù)存進一個數(shù)組，

monthDay:[31,'',31,30,31,30,31,31,30,31,30,31],

由于二月的天數(shù)是不確定的，所以就先設置為空

然后去求選擇的月份的第一天是星期幾，通過 Date.getDay()函數(shù)，這個函數(shù)有一個注意事項，就是如果是星期天，他會返回0，這需要我們自己去處理一下

圖中，2019年1月1號是星期二，所以前面就要給它一個空格塊
下面代碼中第一層循環(huán)就是在循環(huán)空格塊，spaceDay表示需要幾個空格

<p v-for="item in spaceDay" :key="item.id"></p>
<p v-for="(item,idx) in (monthDay[this.month-1] || 30)" @click="setDay(idx)" :class="idx==activeDay?'active':''" :key="item.id">{{item}}</p>

下面貼出完整代碼

<template>
? ? <div id="calender">
? ? ? ? <div class="txt-c p-10">
? ? ? ? ? ? <span @click="prev"> ?? </span>
? ? ? ? ? ? <input type="text" v-model="year">年
? ? ? ? ? ? <input type="text" v-model="month" class="month">月
? ? ? ? ? ? <span @click="next"> ????? </span>
? ? ? ? </div>
? ? ? ? <div class="weekDay flex jc-sb p-5 day" >
? ? ? ? ? ? <p v-for="item in weekList" :key="item.id">{{item}}</p>
? ? ? ? </div>
? ? ? ? <div class="weekDay flex p-5 day">
? ? ? ? ? ? <p v-for="item in spaceDay" :key="item.id"></p>
? ? ? ? ? ? <p v-for="(item,idx) in (monthDay[this.month-1] || 30)" @click="setDay(idx)" :class="idx==activeDay?'active':''" :key="item.id">{{item}}</p>
? ? ? ? </div>
? ? </div>
</template>

<script>
? ? export default {
? ? ? ? name: "calender",
? ? ? ? data(){
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? year: '', // 年份
? ? ? ? ? ? ? ? month: '', // 月份
? ? ? ? ? ? ? ? day: '', // 天數(shù)
? ? ? ? ? ? ? ? current: '', // 當前時間
? ? ? ? ? ? ? ? weekList:['周一','周二','周三','周四','周五','周六','周日'],
? ? ? ? ? ? ? ? monthDay:[31,'',31,30,31,30,31,31,30,31,30,31],
? ? ? ? ? ? ? ? activeDay: '', // 選中的日期
? ? ? ? ? ? ? ? spaceDay: '', // 每個月第一天是星期幾
? ? ? ? ? ? ? ? February:'' // 判斷2月份的天數(shù)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? created(){
? ? ? ? ? ? this.current = new Date()
? ? ? ? ? ? this.getTheCurrentDate()
? ? ? ? ? ? this.getMonthFisrtDay()
? ? ? ? ? ? this.February = this.isLeapYear(this.year) ? 28 : 29
? ? ? ? ? ? this.monthDay.splice(1,1,this.February)
? ? ? ? },
? ? ? ? watch:{
? ? ? ? ? month(){
? ? ? ? ? ? ? if(this.month>12||this.month<1){
? ? ? ? ? ? ? ? ? console.log('請輸入正確月份')
? ? ? ? ? ? ? ? ? return
? ? ? ? ? ? ? }
? ? ? ? ? ? ? this.getMonthFisrtDay()
? ? ? ? ? },
? ? ? ? ? year(){
? ? ? ? ? ? ? this.getMonthFisrtDay()
? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? // 判斷是否是閏年
? ? ? ? ? ? isLeapYear(year){
? ? ? ? ? ??
? ? ? ? ? ? ? ? return year % 4 == 0 && year % 100 != 0 ||year % 400 == 0;
? ? ? ? ? ? },
? ? ? ? ? ? // 選取特定天數(shù)
? ? ? ? ? ? setDay(idx){
? ? ? ? ? ? ? ? this.activeDay = idx
? ? ? ? ? ? ? ? this.day = idx + 1
? ? ? ? ? ? ? ? console.log('選擇的日期是'+this.year+' '+this.month+' '+this.day)
? ? ? ? ? ? },
? ? ? ? ? ? // 判斷月份的第一天是星期幾
? ? ? ? ? ? getMonthFisrtDay(){
? ? ? ? ? ? ? ? var firstDayOfCurrentMonth = new Date(this.year,this.month-1,1) // 某年某月的第一天
? ? ? ? ? ? ? ? if(firstDayOfCurrentMonth.getDay() == 0){
? ? ? ? ? ? ? ? ? ? this.spaceDay = 6
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? this.spaceDay = firstDayOfCurrentMonth.getDay() - 1
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? // 獲取當前的日期
? ? ? ? ? ? getTheCurrentDate(){
? ? ? ? ? ? ? ? this.year = this.current.getFullYear()
? ? ? ? ? ? ? ? this.month = this.current.getMonth() + 1
? ? ? ? ? ? ? ? this.day = this.current.getDate()
? ? ? ? ? ? },
? ? ? ? ? ? prev(){
? ? ? ? ? ? ? ? if(this.month==1){
? ? ? ? ? ? ? ? ? ? this.year--
? ? ? ? ? ? ? ? ? ? this.month=12
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? this.month--
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.activeDay = 0
? ? ? ? ? ? ? ? this.getMonthFisrtDay()
? ? ? ? ? ? },
? ? ? ? ? ? next(){
? ? ? ? ? ? ? ? if(this.month==12){
? ? ? ? ? ? ? ? ? ? this.year++
? ? ? ? ? ? ? ? ? ? this.month=1
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? this.month++
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.activeDay = 0
? ? ? ? ? ? ? ? this.getMonthFisrtDay()
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>

<style lang="scss" scoped>
#calender{
? ? .txt-c{
? ? ? ? text-align: center;
? ? }
? ? .p-10{
? ? ? ? padding: 2rem;
? ? }
? ? .p-5{
? ? ? ? padding: 1rem;
? ? }
? ? .flex {
? ? ? ? display: flex;
? ? }
? ? .jc-sb{
? ? ? ? justify-content: space-between;
? ? }
? ? input{
? ? ? ? width: 50px;
? ? ? ? &.month{
? ? ? ? ? ? width: 30px;
? ? ? ? }
? ? }
? ? .day{
? ? ? ? flex-wrap: wrap;
? ? ? ? p{
? ? ? ? ? ? width: 14.28%;
? ? ? ? ? ? /*flex: 0 0 0 ;*/
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? line-height: 2.4rem;
? ? ? ? ? ? height: 2.4rem;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? z-index: 100;
? ? ? ? ? ? &.active{
? ? ? ? ? ? ? ? color: #fff;
? ? ? ? ? ? }
? ? ? ? ? ? &.active:before{
? ? ? ? ? ? ? ? content: '';
? ? ? ? ? ? ? ? height: 2.5rem;
? ? ? ? ? ? ? ? width: 2.5rem;
? ? ? ? ? ? ? ? position: absolute;
? ? ? ? ? ? ? ? z-index: -1;
? ? ? ? ? ? ? ? left: 0;
? ? ? ? ? ? ? ? top: 0;
? ? ? ? ? ? ? ? transform: translateX(50%);
? ? ? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? ? ? background: #e97163;
? ? ? ? ? ? ? ? color: #fff;
? ? ? ? ? ? }
? ? ? ? }
? ? }
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: