關於Moment.js( 輕量級JavaScript日期處理類庫 ) + 獲取對應天數並轉換---Vue篇

{

　　像匹黑馬我打破常規，Watch out I do it my way ，聚光燈照在了黑 T-shirt，要做第一不想做第二

}

Moment.js輕量級JavaScript日期處理類庫

官網：http://momentjs.cn/docs/

Vue結合moment.js使用( 只是簡單使用轉換格式，太深的還沒有了解 )( 根據后端指定格式進行轉換 )

安裝(安裝其中一種)：npm install moment || cnpm i moment --save || npm install moment --save

main.js掛載

import moment from 'moment' //引入

Vue.prototype.$moment = moment;//給它的原型添加一個屬性為$moment

moment.locale('zh-cn');//需要漢化

對應組件使用：

凡是用的prototype,使用都要this.繼承

this.$moment(對應日期).format("YYYY-MM-DD")

 

---

 

小demo使用( 還沒有封裝 )

先說下我這個小案例為什么會用到Moment.js，因為是獲取到日期之后傳過去但是同時需要獲取對應的星期幾轉成字符串也傳過去,也就是說選擇完日期的同時也獲取到了一周第幾天( 0 - 6 === 星期一 - 星期日 )，用的elementUI日期選擇器，但是獲取周幾的時候日期選擇器的格式又不對了，如果堅持使用UI框架中綁定的轉換格式就會報錯了所以運用了Moment.js在外面轉換一下，轉換成后端指定格式，話不多說看代碼結構：

結構：
<el-date-picker
    v-model="ruleForm.value1"
    type="daterange"
    range-separator="-"
    start-placeholder="開始日期"
    end-placeholder="結束日期"
    style="width:475px"
    :picker-options="{ firstDayOfWeek: 1 }"
    @change="changeDate"
　　 >
</el-date-picker>
[:picker-options="{ firstDayOfWeek: 1 }"表示自然排序，星期一到星期五按順序排( 也就是獲取到一星期的第一天 星期一 )]

data中：
ruleForm: {
     value1: "", //日期值
     weekValueStart: "", //開始日期對應的星期幾
     weekValueEnd: "" //結束日期對應的星期幾
}

事件:
獲取一周第幾天生成一個方法然后調用,根據yyyy-MM-dd 轉化為 week 會用到方法中的參數、getDay() 這個參數就是選擇的日期值( 中國標准時間 ) getDay() : 所指的星期中的某一天，使用本地時間。返回值是 0（周日） 到 6（周六） 之間的一個整數。 因為一共7天，所以直接if判斷了
------------------------------------------------------------------------
//獲取開始日期對應星期幾,這時就會用到data中定義的空字符串接收
getWeekStart(date) {
      if (date.getDay() == 0) this.ruleForm.weekValueStart = "0";
      if (date.getDay() == 1) this.ruleForm.weekValueStart = "1";
      if (date.getDay() == 2) this.ruleForm.weekValueStart = "2";
      if (date.getDay() == 3) this.ruleForm.weekValueStart = "3";
      if (date.getDay() == 4) this.ruleForm.weekValueStart = "4";
      if (date.getDay() == 5) this.ruleForm.weekValueStart = "5";
      if (date.getDay() == 6) this.ruleForm.weekValueStart = "6";
    },

//獲取結束日期對應星期幾,這時就會用到data中定義的空字符串接收 getWeekEnd(date) {
      if (date.getDay() == 0) this.ruleForm.weekValueEnd = "0";
      if (date.getDay() == 1) this.ruleForm.weekValueEnd = "1";
      if (date.getDay() == 2) this.ruleForm.weekValueEnd = "2";
      if (date.getDay() == 3) this.ruleForm.weekValueEnd = "3";
      if (date.getDay() == 4) this.ruleForm.weekValueEnd = "4";
      if (date.getDay() == 5) this.ruleForm.weekValueEnd = "5";
      if (date.getDay() == 6) this.ruleForm.weekValueEnd = "6";
    },

//選擇器觸發事件 //在這里面調上方方法，參數就是上方的值根據下標區分開始結束 //這個時候一旦觸發選擇器就會進行賦值了就會拿到對應星期幾可以傳了 changeDate(val) {
      this.getWeekStart(val[0]);
      this.getWeekEnd(val[1]);
      console.log(this.ruleForm.weekValueStart, this.ruleForm.weekValueEnd);
    }

調接口轉換數據開始傳參:
editList() {
　　   //選擇器的開始日期轉換為 YYYY-MM-DD //_this.value1[0]就是日期綁定的值的數組中的第一項 開始日期

      const startTime = this.$moment(_this.value1[0]).format("YYYY-MM-DD"); 

　　   //選擇的結束日期轉換為 YYYY-MM-DD //_this.value1[1]就是日期綁定值的數組中的第二項 結束日期

      const endeTime = this.$moment(_this.value1[1]).format("YYYY-MM-DD"); 

      const req = {
        id: this.editLeagueClassChildId,
        startDate: startTime,//開始日期
        endDate: endeTime,//結束日期
        weekSchedule: [
          {
            dayOfWeek: _this.weekValueStart //開始日期的對應一周第幾天
          },
          {
            dayOfWeek: _this.weekValueEnd //結束日期的對應一周第幾天
          }
        ]
      };
      grouplessonscheduleEdit(req).then(res => {
        if (res.data.code == "200") {
          this.$messageOK("success", "提交成功");
        } else {
          this.$messageOK("error", "提交失敗");
          return false;
        }
      });
    }