element ui Date TimePicker 日期时间选择器 如何选择选择当前时间

要选择当前时间，可以将 Date TimePicker 组件的 value 属性设置为当前时间。具体实现方式可以参考以下代码示例：

<el-date-picker
  v-model="datetime"
  type="datetime"
  value-format="yyyy-MM-dd HH:mm:ss"
  :default-value="new Date()"
></el-date-picker>

其中，`datetime` 是你的数据模型中的时间属性，`value-format` 指定了时间格式，`:default-value="new Date()"` 会将默认值设置为当前时间。这样就可以让 Date TimePicker 组件默认选中当前时间了。

相关问题

element ui 在时间选择器下拉框底部添加选择今天功能

您可以在 Element UI 的 `TimePicker` 组件的下拉框底部添加一个“选择今天”按钮，来实现在时间选择器下拉框底部添加选择今天功能。具体实现方法如下：

1. 在 `TimePicker` 组件上添加 `ref` 属性，用于获取下拉框 DOM 元素：

<el-time-picker
  ref="timePicker"
  ...
></el-time-picker>

2. 在 `mounted` 钩子函数中获取下拉框 DOM 元素，并在其底部添加“选择今天”按钮：

mounted() {
  const picker = this.$refs.timePicker.picker;
  const footerBtn = document.createElement('span');
  footerBtn.textContent = '选择今天';
  footerBtn.addEventListener('click', () => {
    picker.date = new Date(); // 设置日期为今天
    picker.handleConfirm(); // 触发确认事件
  });
  picker.$el.querySelector('.el-time-panel__footer').appendChild(footerBtn);
}

在上述代码中，我们首先获取了 `TimePicker` 组件的下拉框 DOM 元素，然后在其底部添加了一个按钮，并监听其点击事件。当用户点击“选择今天”按钮时，我们会将日期设置为今天，并触发确认事件，从而完成日期的选择。

需要注意的是，由于 `TimePicker` 组件的底部有一个分割线，因此我们需要将“选择今天”按钮添加在分割线的上方。在上述代码中，我们通过 `querySelector` 方法找到了分割线对应的 DOM 元素，并在其之前添加了按钮。

element UI 时间选择器，显示默认时间为当前时间至7天之前时间 （并格式化日期-年月日，时分秒）

您可以使用 Element UI 的 DatePicker 和 TimePicker 组件来实现您的需求。具体操作如下：

1. 在组件中引入 DatePicker 和 TimePicker 组件，并设置 v-model 双向绑定变量。

<el-date-picker v-model="dateValue" :default-time="defaultTime" type="datetime" :picker-options="pickerOptions"></el-date-picker>
<el-time-picker v-model="timeValue" :picker-options="pickerOptions"></el-time-picker>

2. 在组件中定义相关变量：

data() {
  return {
    dateValue: null, // 日期选择器的值
    timeValue: null, // 时间选择器的值
    pickerOptions: { // 日期选择器的选项
      shortcuts: [{
        text: '最近7天',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', [start, end]);
        }
      }]
    }
  }
},
computed: {
  defaultTime() { // 时间选择器的默认时间
    const now = new Date();
    const sevenDaysAgo = new Date(now - 7 * 24 * 60 * 60 * 1000);
    return sevenDaysAgo;
  }
},

3. 在组件中使用 moment 库对日期进行格式化：

import moment from 'moment'; // 引入 moment 库

// 格式化日期
const formattedDate = moment(this.dateValue).format('YYYY-MM-DD');
// 格式化时间
const formattedTime = moment(this.timeValue).format('HH:mm:ss');

完整代码示例：

<template>
  <div>
    <el-date-picker v-model="dateValue" :default-time="defaultTime" type="datetime" :picker-options="pickerOptions"></el-date-picker>
    <el-time-picker v-model="timeValue" :picker-options="pickerOptions"></el-time-picker>
    <div>格式化后的日期时间：{{ formattedDateTime }}</div>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      dateValue: null,
      timeValue: null,
      pickerOptions: {
        shortcuts: [{
          text: '最近7天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  computed: {
    defaultTime() {
      const now = new Date();
      const sevenDaysAgo = new Date(now - 7 * 24 * 60 * 60 * 1000);
      return sevenDaysAgo;
    },
    formattedDateTime() {
      const formattedDate = moment(this.dateValue).format('YYYY-MM-DD');
      const formattedTime = moment(this.timeValue).format('HH:mm:ss');
      return `${formattedDate} ${formattedTime}`;
    }
  }
}
</script>