vue3.0 el-date-picker 获取当天时间

可以使用 JavaScript Date 对象获取当天时间，然后传递给 el-date-picker 组件进行显示。具体可以参考以下代码：

<template>
  <el-date-picker v-model="currentDate" type="date" :picker-options="pickerOptions"></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  }
};
</script>

注意：以上回答仅供参考，不代表技术立场或观点。

相关问题

vue3 使用el-date-picker picker-options

### 关于 `el-date-picker` 组件中的 `picker-options`

在 Vue 3 中使用 Element Plus 的 `el-date-picker` 组件时，可以通过配置 `picker-options` 来自定义日期选择器的行为。此属性允许设置一些特定的选项来控制可选范围、快捷方式以及其他行为。

#### 自定义不可选日期

通过指定函数返回布尔值的方式来自定义哪些天是禁用状态：

const disabledDate = (time) => {
    const date = new Date();
    // 禁用今天之后的所有日期
    return time.getTime() > date.setHours(0, 0, 0, 0);
};

#### 设置快捷操作项

可以为用户提供一组预设的时间区间供快速选择：

const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
        },
    }
];

#### 完整示例代码

下面是一个完整的例子展示如何在模板中应用这些配置：

<template>
  <div class="block">
    <span class="demonstration">带有快捷选项</span>
    <el-date-picker
      v-model="value"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 可选参数对象
const pickerOptions = {
  shortcuts,
  disabledDate,
};

// 数据绑定变量
let value = ref('');
</script>

[^1]

“vue中 在el-from-item 中使用el-date-picker 获取不到el-date-picker绑定的值

在el-form-item中使用el-date-picker获取不到el-date-picker绑定的值可能是因为没有正确绑定v-model。请确保在el-date-picker中正确绑定v-model，例如：

<el-form-item label="选择日期">
  <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>

同时，也需要确保在el-form中正确绑定model，例如：

<el-form :model="form">
  <el-form-item label="选择日期">
    <el-date-picker v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
  </el-form-item>
</el-form>

如果以上两个步骤都正确，但仍然无法获取el-date-picker绑定的值，可能是因为在获取值时使用了错误的变量名或者没有在data中定义相应的变量。