Vue dynamically displays the day of the week corresponding to the date according to the selected month

We, humble coders, still have to sing, "You and I are all mortals, born in this world, busy all day long, without a moment's rest. Since we are not immortals, we are bound to have distracting thoughts. We put worries aside and put the salary in the middle. How many men are bald and fat, working overtime days and nights without buying insurance."

Although I have been resisting, it has never worked. For the big bosses, it’s their dreams that come true, but for us, it’s our dreams that lead to us being blamed!

After all the complaints, I still have to take the blame, work overtime, and continue coding! ! !

Come, let’s achieve the effect mentioned in the title.

The principle is actually very simple. First, you need to have an input box to select the year and month. Here I use Element's DatePicker date selector component. I won't go into details about how to use it. Go and look at Element's API yourself.

Then, each day of the current month is dynamically displayed according to the selected month. Two methods of the date object are used here: setMonth and setDate.

The setMonth(month, day) method is used to set the month. The parameters are described as follows:
month: required. A numeric value representing the month, between 0 (January) and 11 (December).
day: Optional. A numeric value between 1 and 31 representing the day of the month in local time. Before EMCAScript was standardized, this parameter was not supported.

The setDate(day) method is used to set a day of a month. The parameters are as follows:
day: required. A numeric value (1 to 31) representing the day of the month.

The specific code is as follows:

<template>
 <div>
  <el-date-picker v-model="month" type="month" @change="monthChange" placeholder="Select month" />
  <p>
   Each day of the month:
   <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) {
   //Set the month date.setMonth(month + 1);
   //Set a day of the month - if it is set to zero, the day of the date will be the last day of the month (for example, February is 28 or 29, other months are 30 or 31), which is convenient for the following loop date.setDate(0);
   let dayArry = [];
   //Get a day of the month let day = date.getDate();

   for (let i = 1; i <= day; i++) {
    date.setDate(i); //If you only want to get every day of the currently selected month, you don't need date.setDate(i), just dayArry.push(i), where date.setDate(i) sets every day of the current month dayArry.push(i + ' ' + this.getWeekday(date.getDay())); //Every day of the selected month and the day of the week}

   this.everyDay = dayArry;
  },
  getWeekday(day){
   return ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][day];
  },
 }
};
</script>

The display effect is as follows:

Note that since the value returned by the getMonth method starts at 0, if you want to get the correct month, you need to add 1 to the returned value. There is something special about setDate, which needs to be explained in detail. setDate is used to set a certain day of a month. For example, setDate(1) sets the first day of a month, and setDate(10) sets the tenth day of a month. However, for well-known reasons, a month may have 28 days, 29 days, 30 days or 31 days. If we write code to judge by ourselves, it is too cumbersome. At this time, the awesomeness of setDate(0) is revealed (the official setDate parameter is between 1-31, and 0 is ruthlessly abandoned. Brother Ling is singing sadly at this time: ruthless world, ruthless you, you treat me as garbage in your hands). setDate(0) is set to the last day of the month, no matter whether this day is 28, 29, 30 or 31 (Brother Ling shouted at this time: You ignored me before, but now you can't afford me!), and then use the getDate method to get the last day of the month we have set. Finally, put a for loop and put each day into an array, and you can call it a day!

Of course, we can also not display the day of the week corresponding to each day, but only display the two days corresponding to Saturday and Sunday in red. The code only needs a small modification:

<template>
 <div style="margin:50px;">
  <el-date-picker v-model="month" type="month" @change="monthChange" placeholder="Select month" />
  <p style="margin-top:10px;">
   Each day of the month:
   <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) {
   //Set the month date.setMonth(month + 1);
   //Set a day of the month - if it is set to zero, the day of the date will be the last day of the month (for example, February is 28 or 29, other months are 30 or 31), which is convenient for the following loop date.setDate(0);
   let dayArry = [];
   //Get a day of the month 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>

The display effect is as follows:

Author: Xiaohuai

Source: http://tnnyang.cnblogs.com

The above is the details of how Vue dynamically displays the day of the week corresponding to the date according to the selected month. For more information about how Vue selects the month to dynamically display the date, please pay attention to other related articles on 123WORDPRESS.COM!