vue element UI 日期篇年月日时分秒以及控制只能选择当前日期之后的日期

最新推荐文章于 2024-04-15 11:34:39 发布

B站老B灯

最新推荐文章于 2024-04-15 11:34:39 发布

阅读量608

点赞数

文章标签： vue elementui 前端

本文链接：https://blog.csdn.net/weixin_47417181/article/details/125521010

版权

<el-date-picker
              size="small"
              v-model="logForm.date"
              type="datetime"
              style="width: 100%"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              defaule-value="dafaultValue"
              :picker-options="pickerOptions"
            >
            </el-date-picker>


<script>
data() {
    return {
      logForm: {
        data: "",
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
    };
  },
methods: {
    Date() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds(),
      };

      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const newday = date.date > 10 ? date.date : "0" + date.date;
      const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
      const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
      const value =
        date.year +
        "-" +
        newmonth +
        "-" +
        newday +
        " " +
        date.hours +
        ":" +
        newminutes +
        ":" +
        newseconds;

      this.$set(this.logForm, "date", value);
    }
  },
</script>