vue 根據選擇的月份動態展示日期對應的星期幾

我等卑微的碼農,依舊還得唱著“你我皆凡人,生在人世間,終日奔波苦,一刻不得閑,既然不是仙,難免有雜念,煩惱放兩旁,工資擺中間,多少男子漢,禿頂又肥胖,加班的日夜,沒有買保險”。

雖一直反抗,卻從未奏效。大老板們是夢想照進現實,我等是夢想撞見黑鍋!

牢騷瞭那麼多,鍋還得背,班還得加,code還得繼續碼!!!

來,把標題中所提到的這個效果給實現一下吧。

原理其實很簡單,先得有一個選擇年月的輸入框吧,這裡我用的是Element的DatePicker日期選擇器組件,具體使用方法不多說,自己去看Element的API吧。

然後就是根據選擇的月份來動態顯示當前月份的每一天瞭,這裡用到瞭日期對象的兩個方法:setMonth和setDate。

其中,setMonth(month, day) 方法用於設置月份,參數介紹如下:
month:必需。一個表示月份的數值,該值介於 0(一月) ~ 11(十二月) 之間。
day:可選。一個表示月的某一天的數值,該值介於 1 ~ 31 之間(以本地時間計)。在 EMCAScript 標準化之前,不支持該參數。

setDate(day) 方法用於設置一個月的某一天,參數介紹如下:
day:必需。表示一個月中的一天的一個數值(1 ~ 31)。

具體代碼如下:

<template>
 <div>
  <el-date-picker v-model="month" type="month" @change="monthChange" placeholder="選擇月" />
  <p>
   當月的每一天:
   <span v-for="item in everyDay" :key="item" style="margin-right:10px;">{{item}}</span>
  </p>
 </div>
</template>

<script>
export default {
 data() {
  return {
   month: "",
   everyDay: []
  };
 },
 mounted(){
  let date = new Date(), month = date.getMonth();
  this.getEveryDay(date, month);
 },
 methods: {
  monthChange(date) {
   this.getEveryDay(date, date.getMonth());
  },
  getEveryDay(date, month) {
   //設置月份
   date.setMonth(month + 1);
   //設置一個月的某一天-這裡設置為零則取到的日期中的天就會是當月的最後一天(比如,二月份就是28或29,其他月份就是30或31),方便下邊的循環
   date.setDate(0);
   let dayArry = [];
   //獲取月份的某一天
   let day = date.getDate();

   for (let i = 1; i <= day; i++) {
    date.setDate(i);  //如果隻獲取當前選擇月份的每一天,則不需要date.setDate(i)隻需dayArry.push(i)即可,其中date.setDate(i)是設置當前月份的每一天
    dayArry.push(i + ' ' + this.getWeekday(date.getDay()));  //選中月份的每一天和當天是星期幾
   }

   this.everyDay = dayArry;
  },
  getWeekday(day){
   return ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][day];
  },
 }
};
</script>

展示效果如下:

註意,由於getMonth方法返回的值是從0開始的,所以如果要想獲得正確的月份,需要在返回的值的基礎上加1。而setDate這裡有一點特殊,需要詳細說明一下,setDate用於設置一個月的某一天,比如setDate(1)就是設置一個月的第一天,setDate(10)就是設置一個月的第十天。而由於眾所周知的原因,月份可能會有28天或29天或30天或31天,如果讓我們自己去寫代碼判斷,又太過於繁瑣,此時setDate(0)的牛逼之處就顯示出來瞭(官方給出的setDate的參數介於1-31之間,將0給無情地拋棄瞭,零兄此時悲傷的高歌:無情的世界無情的你,你把老子當成手中的垃圾),setDate(0)設置的是一個月的最後一天,甭管這一天是28還是29,亦或是30或31(零兄此時高喊:以前你對我愛答不理,現在讓你高攀不起!),之後再通過getDate方法來獲取我們已經設置好的一個月份的最後一天,最後來上一個for循環,將每一天給塞進一個數組中,就可以打完收工!

當然,我們還可以不展示每一天對應的是星期幾,隻將每周的周六周日所對應的那兩天給標紅展示,代碼隻是做瞭一點小修改:

<template>
 <div style="margin:50px;">
  <el-date-picker v-model="month" type="month" @change="monthChange" placeholder="選擇月" />
  <p style="margin-top:10px;">
   當月的每一天:
   <span v-for="item in everyDay" :key="item" style="margin-right:10px;" v-html="item"></span>
  </p>
 </div>
</template>

<script>
export default {
 data() {
  return {
   month: "",
   everyDay: []
  };
 },
 mounted(){
  let date = new Date(), month = date.getMonth();
  this.getEveryDay(date, month);
 },
 methods: {
  monthChange(date) {
   this.getEveryDay(date, date.getMonth());
  },
  getEveryDay(date, month) {
   //設置月份
   date.setMonth(month + 1);
   //設置一個月的某一天-這裡設置為零則取到的日期中的天就會是當月的最後一天(比如,二月份就是28或29,其他月份就是30或31),方便下邊的循環
   date.setDate(0);
   let dayArry = [];
   //獲取月份的某一天
   let day = date.getDate();

   for (let i = 1; i <= day; i++) {
    date.setDate(i);
    if(date.getDay() == 0 || date.getDay() == 6){
     dayArry.push('<i class="red">' + i + '</i>');
    }else{
     dayArry.push(i);
    }
   }

   this.everyDay = dayArry;
  },
 }
};
</script>
<style>
.red{color:red;font-style:normal;}
</style>

展示效果如下:

作者:小壞

出處:http://tnnyang.cnblogs.com

以上就是vue 根據選擇的月份動態展示日期對應的星期幾的詳細內容,更多關於vue 選擇月份動態展示日期的資料請關註WalkonNet其它相關文章!