moment 獲取當前月日歷


獲取當前月日歷

 

<template>
    <div id="calendar">
        <div class="top">{{date}}</div>
        <ul>
            <li><b></b></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li><b></b></li>
        </ul>
        <ul v-for="item in arr" :key="item.id">
            <li><span :class="item[0].day == date.substring(8) && item[0].month == '當月'? 'choose' :''" :style="!Object.is(item[0].month,'當月') ? 'color:#cecece;' : ''">{{item[0].day}}</span>&nbsp;</li>
            <li><span :class="item[1].day == date.substring(8) && item[1].month == '當月'? 'choose' :''" :style="!Object.is(item[1].month,'當月') ? 'color:#cecece;' : ''">{{item[1].day}}</span>&nbsp;</li>
            <li><span :class="item[2].day == date.substring(8) && item[2].month == '當月'? 'choose' :''" :style="!Object.is(item[2].month,'當月') ? 'color:#cecece;' : ''">{{item[2].day}}</span>&nbsp;</li>
            <li><span :class="item[3].day == date.substring(8) && item[3].month == '當月'? 'choose' :''" :style="!Object.is(item[3].month,'當月') ? 'color:#cecece;' : ''">{{item[3].day}}</span>&nbsp;</li>
            <li><span :class="item[4].day == date.substring(8) && item[4].month == '當月'? 'choose' :''" :style="!Object.is(item[4].month,'當月') ? 'color:#cecece;' : ''">{{item[4].day}}</span>&nbsp;</li>
            <li><span :class="item[5].day == date.substring(8) && item[5].month == '當月'? 'choose' :''" :style="!Object.is(item[5].month,'當月') ? 'color:#cecece;' : ''">{{item[5].day}}</span>&nbsp;</li>
            <li><span :class="item[6].day == date.substring(8) && item[6].month == '當月' ? 'choose' :''" :style="!Object.is(item[6].month,'當月') ? 'color:#cecece;' : ''">{{item[6].day}}</span>&nbsp;</li>
        </ul>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    data () {
        return {
            currentMonthDays:'',
           currentWeekday:'',
           lastMonthDays:'',
           date:moment().format('YYYY-MM-DD'),
           arr:[],
        }
    },
    methods: {
      getData(){
      this.currentWeekday = moment(this.date).date(1).weekday(); // 獲取當月1號為星期幾
      this.lastMonthDays = moment(this.date).subtract(1, 'month').daysInMonth(); // 獲取上月天數
      this.currentMonthDays = moment(this.date).daysInMonth(); // 獲取當月天數
      //一個月總天數是31,1號是周五或者周六 => 6個[]
      //一個月總天數是30,1號是周六 => 6個[]
    var daysArr = [] if((this.currentMonthDays == '31' && this.currentWeekday == '5' || this.currentWeekday == '6' ) || (this.currentMonthDays == '30' && this.currentWeekday == '6')){ daysArr = [[], [], [], [], [], []]; }else{ daysArr = [[], [], [], [], []]; } //當day小於等於上月天數取day, //當day小於等於上月天數 + 當月天數則取 day-上月天數 //當day大於上月天數 + 當月天數則取 day - (上月天數 + 當月天數) //展示上個月這個月下個月的日歷 const getDay = day => (day <= this.lastMonthDays ? day : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : day - (this.lastMonthDays + this.currentMonthDays)); // 日期處理 //只展示這個月的日歷 // const getDay = day => (day <= this.lastMonthDays ? '' : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : ''); // 日期處理 //當mon小於等於上月天數該日期屬於上個月, //當day小於等於上月天數 + 當月天數則該日期屬於這個月 //當day大於上月天數 + 當月天數則該日期屬於下個月 const getMonth = mon => (mon <= this.lastMonthDays ? '上月' : mon <= (this.lastMonthDays + this.currentMonthDays) ? '當月' : '下月') for (let i = 0; i < 7; i += 1) { let virtualDay = (this.lastMonthDays - this.currentWeekday) + i + 1; for (let j = 0; j < daysArr.length; j += 1) { daysArr[j][i] = {'day':getDay(virtualDay + (j * 7)),'month':getMonth(virtualDay + (j * 7))}; } } console.table(daysArr); this.arr = daysArr } }, mounted () { this.getData() } } </script> <style scoped > *{margin:0;padding:0; list-style:none } .choose{ width: 30px; height: 30px; line-height: 30px; text-align: center; display: inline-block; background: #2196f3; color: #fff !important; border-radius: 50%; } #calendar { width: 400px; font-size: 12px; margin: 50px auto; border-bottom: 1px solid #2196f3; } #calendar .top { height: 40px; line-height: 40px; background: #2196f3; border: 1px solid #2196f3; color: #fff; padding: 0 10px; clear: both; } #calendar ul { margin: 0; padding: 0; height:50px; color: #888; font-size: 14px; border-left: 1px solid #2196f3; border-right: 1px solid #2196f3; display: flex; align-items: center; justify-content: space-between; } #calendar ul li { width: 48px; } #calendar ul li span { color: black; font-weight: bold; } #calendar ul li b { font-weight: normal; color: #0781e2; } </style>

 

 

 

 這個是只取當前月份:使用這個  =>  const getDay = day => (day <= this.lastMonthDays ? '' : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : ''); // 日期處理



在當月日歷展示下個月的日期使用如下方法
const getDay = day => (day <= this.lastMonthDays ? day : (day <= (this.lastMonthDays + this.currentMonthDays)) ? day - this.lastMonthDays : day - (this.lastMonthDays + this.currentMonthDays)); // 日期處理



 

 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM