ElementUI DateTimePicker设置当前日期之前的时间禁止选择

阳光穿透心脏的1/2处 2022-10-06 07:55 780阅读 0赞

# 一、概述 #

根据项目需求，选择日期，不能小于当前日期。

# 二、代码实现 #

test.vuie

<template>
      <div>
        <el-date-picker
          v-model="value1"
          type="date"
          :picker-options="pickerOptions1"
          placeholder="选择日期">
        </el-date-picker>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            value1: '',
            pickerOptions1: {
              disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7;
              },
            }
          }
        },
      }
    </script>
    <style scoped>
    
    </style>

**注意：pickerOptions1在data里面，而不是methods里面。**

![a4a975b24f3b6901a765316cbeb430e5.png][]

如果需要默认显示当前日期，可以将value1设置为：

value1: new Date(),

new Date()可以获取当前日期。

本文参考链接：

[https://blog.csdn.net/qq\_42074075/article/details/100014733][https_blog.csdn.net_qq_42074075_article_details_100014733]

[a4a975b24f3b6901a765316cbeb430e5.png]: /images/20221005/910fc34eb3d24fc68c7c2028cc710493.png
[https_blog.csdn.net_qq_42074075_article_details_100014733]: https://blog.csdn.net/qq_42074075/article/details/100014733

发表评论取消回复

表情：

评论列表（有 0 条评论，780人围观）

还没有评论，来说两句吧...

相关阅读

相关 elementUI日期时间选择器

1.只能选择今天和今天以后的时间范围 <el-date-picker 　　v-model="shop.receive_time[0]" 　　type=

分手后的思念是犯贱/ 2024年04月08日 09:29/ 0 赞/ 86 阅读

相关 elementui日期时间选择限制

参考文章 https://blog.csdn.net/qq\_36747046/article/details/106946325 https://blog.csdn.n

Bertha 。/ 2022年12月22日 15:30/ 0 赞/ 274 阅读

相关 DatePicker设置当前日期之前日期不可选

<el-date-picker v-model="form.expirationDateEnd" type="date"

比眉伴天荒/ 2022年11月30日 12:29/ 0 赞/ 364 阅读

相关 ElementUI DateTimePicker设置当前日期之前的时间禁止选择

一、概述根据项目需求，选择日期，不能小于当前日期。二、代码实现 test.vuie <template> <div> <

阳光穿透心脏的1/2处/ 2022年10月06日 07:55/ 0 赞/ 781 阅读

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

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

偏执的太偏执、/ 2022年09月02日 08:10/ 0 赞/ 561 阅读

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

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

女爷i/ 2022年08月29日 15:51/ 0 赞/ 403 阅读

相关 element DateTimePicker 日期时间选择器选择范围限制

内容需求：两个DateTimePicker选择日期范围需要做日期范围限制；开始时间必须小于结束时间；结束时间必须大于开始时间；开始时间和结束时间可以选择同一

今天药忘吃喽~/ 2022年08月29日 13:52/ 0 赞/ 1084 阅读

相关 bootstrap-datetimepicker bootstrap选择日期

引用bootstrap-datetimepicker的css和js <div id="datetimepicker2" class="input-append">

淩亂°似流年/ 2022年08月05日 00:48/ 0 赞/ 245 阅读

相关 Form-datetimepicker日期时间选择器

一、日期和时间点 DateTimePicker 日期时间选择器,在同一个选择器里选择日期和时间通过设置type属性为datetime，即可在同一个选择器里同时进

- 日理万妓/ 2022年03月29日 10:50/ 0 赞/ 586 阅读

相关 VUE Elemen-ui 中日期disabledDate ，禁止选择当前之前的日期

<el-date-picker v-model="ruleForm.startDate" type="date"

怼烎@/ 2021年10月01日 04:56/ 0 赞/ 728 阅读