DateTimePicker 日期时间选择器，默认获取当前日期

女爷i 2022-08-29 15:51 403阅读 0赞

在vue里面，我们已经用到过单独的TimePicker 时间选择器和DatePicker 日期选择器了，现在需要用到一个可以同时选择年月日时分秒的插件，饿了么的文档里面就有现成可以使用的~~

在同一个选择器里选择日期和时间

DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

文档：[https://element.eleme.cn/\#/zh-CN/component/datetime-picker][https_element.eleme.cn_zh-CN_component_datetime-picker]

<template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker v-model="value" type="datetime" placeholder="选择日期时间">
        </el-date-picker>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          pickerOptions: {
            shortcuts: [
              {
                text: "今天",
                onClick(picker) {
                  picker.$emit("pick", new Date());
                },
              },
              {
                text: "昨天",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一周前",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit("pick", date);
                },
              },
            ],
          },
          value: "",
        };
      },
    
      created() {
        this.Date();
      },
      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;
          this.value =
            date.year +
            "-" +
            newmonth +
            "-" +
            newday +
            " " +
            date.hours +
            ":" +
            newminutes +
            ":" +
            newseconds;
          
        },
      },
    };
    </script>
    <style scoped>
    .tab-container {
      margin: 30px;
    }
    </style>

![24fa597d0029d7b594957023d023b63b.png][]

[https_element.eleme.cn_zh-CN_component_datetime-picker]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Fdatetime-picker
[24fa597d0029d7b594957023d023b63b.png]: /images/20220829/820059bc6612498ebe60c5e0f9b8597b.png