用vue寫一個日曆外掛
阿新 • • 發佈:2021-09-22
先上圖,看看效果
思路:
實現獲取當前時間,新建一個data
let now = new Date();
然後需要判斷顯示的是否為當月時間
if (cur) { date = new Date(cur); } else { let now = new Date(); date = new Date( /指定時間/ ); }
使用vue的v-for遍歷當月時間
<ul> <!-- 核心 v-for迴圈 每一次迴圈用<li>標籤建立一天 --> <li v-for="dayobject in days" :key="dayobject.index" @click="selectedDate(dayobject.day.getDate())" > <!--本月--> <!--如果不是本月 改變類名加灰色--> <span v-if="dayobject.day.getMonth() + 1 != currentMonth" class="other-month" > {{ dayobject.day.getDate() }}</span> <!--如果是本月 還需要判斷是不是這一天--> <span v-else> <!--今天 同年同月同日--> <span v-if=" dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" class="active" >{{ dayobject.day.getDate() }}</span > <span v-else>{{ dayobject.day.getDate() }}</span> </span> </li> </ul>
如何判斷一個月有多少天?
function getMonthDay(year, month) { let days = new Date(year, month, 0).getDate() return days } getMonthDay(2021, 3)