美文网首页
DateTimePicker 日期时间选择器,默认获取当前日期

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

作者: 祈澈菇凉 | 来源:发表于2021-07-16 15:29 被阅读0次

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

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

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

    文档: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>
    

    相关文章

      网友评论

          本文标题:DateTimePicker 日期时间选择器,默认获取当前日期

          本文链接:https://www.haomeiwen.com/subject/bwlbpltx.html