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

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

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


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


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

<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>

相关文章
|
JavaScript 前端开发
JavaScript实现input框获取系统默认年月日时分秒
JavaScript实现input框获取系统默认年月日时分秒
294 0
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
Element Plus 日期选择器 获取选中的日期的格式(当前日期/时间戳格式)
632 0
|
C# 前端开发
WPF DatePicker默认显示当前日期,格式化为年月日
原文:WPF DatePicker默认显示当前日期 WPF的日历选择控件默认为当前日期,共有两种方法,一种静态,一种动态。 静态的当然写在DatePicker控件的属性里了,动态的写在对应的cs文件里,具体请看下面。
6539 0
|
5月前
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
178 1
|
6月前
|
前端开发 JavaScript 容器
input的date日期如何改样式
input的date日期如何改样式
177 0
|
7月前
可修改文字颜色和限制最大日期的时间选择器使用示例
可修改文字颜色和限制最大日期的时间选择器使用示例
41 0
|
JavaScript
vue获取系统默认的年月日时分秒
vue获取系统默认的年月日时分秒
205 1
|
JavaScript 前端开发 程序员
DatePicker 日期选择器,获取系统默认当前年月日
DatePicker 日期选择器,获取系统默认当前年月日
508 0
|
JavaScript
关于Element-Ui 时间范围选择器DatePicker禁用范围日期问题
饿了么组件库的[DatePicker](https://element.eleme.cn/#/zh-CN/component/date-picker) 日期范围选择,
|
JavaScript API
elementUI中的el-date-picker日期月份时间选择器禁用选中当前和以后的日期
elementUI中的el-date-picker日期月份时间选择器禁用选中当前和以后的日期
1173 0