Vue el-date-picker 日期組件的使用

一:顯示年月

<el-date-picker v-model="selectMonth" type="month" placeholder="選擇月"   @change="jobSearch" value-format="yyyy-MM"></el-date-picker>

js代碼:

<script>
export default {
    data() {
         return {
            selectMonth:''
        }
    },
    created() {
        this.initData({});
    },
    methods: {
        jobSearch() {
      this.getJobListByMonth();
    },
    async initData(data) {
      //獲取當前時間
      var now   = new Date();
      var monthn = now.getMonth()+1;
      var yearn  = now.getFullYear();
      this.selectMonth = yearn+"-"+monthn;

      this.selectUser = parseInt(sessionStorage.getItem("userid"));
      // this.getWeekJobList({
      //   userid: sessionStorage.getItem("userid"),
      //   weekid: "1"
      // });
      this.getJobListByMonth();
    },
    async getJobListByMonth(data) {

    }
   }
}
</script>

二:選擇年月日

 

<el-date-picker v-model="selectDay" type="date" placeholder="選擇日" @change="dataSearch" value-format="yyyy-MM-dd"></el-date-picker>

js代碼:

<script>
export default {
    data() {
         return {
            selectDay:''
        }
    },
    created() {
        this.initData({});
    },
    methods: {
        dataSearch() {
      this.getListByDay();
    },
    async initData(data) {
      //獲取當前時間
      var now   = new Date();
      var monthn = now.getMonth()+1;
      var yearn  = now.getFullYear();
      var dayn = now.getDate();
      this.selectDay = yearn+"-"+monthn+"-"+dayn;

      this.selectUser = parseInt(sessionStorage.getItem("userid"));
      this.getListByDay();
    },
    async getListByDay(data) {

    }
   }
}
</script>

三:顯示年月日時分(秒)

<el-date-picker v-model="selectDatetime" type="datetime" placeholder="選擇時間" @change="dataSearch" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"></el-date-picker>

js代碼:

<script>
export default {
    data() {
         return {
            selectDatetime:''
        }
    },
    created() {
        this.initData({});
    },
    methods: {
        dataSearch() {
      this.getListByDataTime();
    },
    async initData(data) {
      //獲取當前時間
      var now   = new Date();
      var monthn = now.getMonth()+1;
      var yearn  = now.getFullYear();
      var dayn = now.getDate();
      var h = now.getHours();
      var m =now.getMinutes();
      var s = now.getSeconds();
      this.selectDatetime = yearn+"-"+monthn+"-"+dayn+" "+h+":"+m+":"+s;

      this.selectUser = parseInt(sessionStorage.getItem("userid"));
      this.getListByDataTime();
    },
    async getListByDataTime(data) {

    }
   }
}
</script>