1. 程式人生 >實用技巧 >其它 >element ui日期元件

element ui日期元件


對日期進行了預處理(將起始的預設時間設定為當前時間,結束時間的預設時間設定為往一個月後),即使是點選了時間也不會報錯
執行圖效果

element ui日期元件


vue檔案

<template>
  <div>
    <label>開始時間</label>
    <el-date-picker
      v-model="startTime"
      type="datetime"
      :editable="false"
      format="yyyy-MM-dd HH:mm:ss"
      style="width: 200px"
      value-format="yyyy-MM-dd HH:mm:ss"
    ></el-date-picker>
    <label>過期時間</label>
    <!-- 如果我們給其中的一個日期設定了預設值,那麼就儘量不要再去給他使用value-format了,不然就會報錯,因為他是string型別,我們可以在發起請求的時候將資料轉化為後端想要的資料傳過去,例子如下 -->
    <el-date-picker
      v-model="endTime"
      type="datetime"
      :editable="false"
      format="yyyy-MM-dd HH:mm:ss"
      style="width: 200px"
      value-format="yyyy-MM-dd HH:mm:ss"
    ></el-date-picker>
    <el-button @click="find">查詢</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: "",
      endTime: "",
    }
  },
  methods: {
    // 格式化時間,獲取當前時間的一個月後的時間值
    convertToLateDate() {
      var data = new Date()
      var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 30)
      // 以上兩行程式碼為關鍵程式碼,若想要返回一天後的時間,則可以將第二行程式碼更換為下面程式碼
      // var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000);
      // 若是想要返回值為當前時間,則上面兩行程式碼可以直接修改為下面程式碼即可。
      // var Da = new Date()
      var y = Da.getFullYear()
      var m = Da.getMonth() + 1
      var d = Da.getDate()
      var H = Da.getHours()
      var mm = Da.getMinutes()
      var ss = Da.getSeconds()
      m = m < 10 ? "0" + m : m
      d = d < 10 ? "0" + d : d
      H = H < 10 ? "0" + H : H
      return y + "-" + m + "-" + d + " " + H + ":" + mm + ":" + ss
    },
    find() {
      console.log(this.startTime.getTime())
    },
  },
  // 頁面載入完畢後觸發的事件
  mounted() {
    var vm = this
    vm.startTime =
      new Date().getFullYear() +
      "-" +
      new Date().getMonth() +
      1 +
      "-" +
      new Date().getDate() +
      " " +
      new Date().getHours() +
      ":" +
      new Date().getMinutes() +
      ":" +
      new Date().getSeconds()
    vm.endTime = vm.convertToLateDate()
  },
}
</script>