ElementUI组件-日期时间控件设置禁用日期

ElementUI组件-日期时间控件禁用指定日期

主要属性

查看官网，可以看到有个叫做picker-options的组件属性，没错，就是借助他来完成禁用指定日期的操作，如下
在这里插入图片描述
该属性值传入的是一个对象，对于时间选择器、日期选择器、日期时间选择器分别传入不同的配置值来设置禁用功能，咱们一个一个看

对于时间选择器

时间选择器的属性picker-options属性可选的值如下：
在这里插入图片描述
功能如表格描述一样，咱写个小demo测试下就好了，不过要注意，时间选择器中只有el-timer-picker可以禁用指定时间范围之外的值，而el-timer-select只是设置取值范围，范围之外不显示。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    
    
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    
    <script src="https://unpkg.com/element-ui/lib/index.js">script>
    <title>测试时间选择器title>
    <style>
      .all {
        width: 500px;
        position: absolute;
        left: 400px;
      }
    style>
  head>
  <body>
    <div id="app">
      <template>
        <div class="all">
          <el-time-picker
            v-model="value"
            :picker-options="pickerOptions"
            placeholder="选择时间"
          >
          el-time-picker>
        div>
      template>
    div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            value: "",
            pickerOptions: {
              // 设置可选范围，范围之外禁选
              selectableRange: "18:30:00 - 20:30:00",
            },
          };
        },
      });
    script>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

在这里插入图片描述

日期选择器

日期选择器中通过给picker-options配置disabledDate来设置禁用状态，并且注意这个disabledDate是个函数类型，返回值是boolean类型
在这里插入图片描述

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    
    
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    
    <script src="https://unpkg.com/element-ui/lib/index.js">script>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js">script>
    <title>测试日期选择器title>
    <style>
      .all {
        width: 500px;
        position: absolute;
        left: 400px;
      }
    style>
  head>
  <body>
    <div id="app">
      <template>
        <div class="all">
          <el-date-picker
            v-model="value"
            type="date"
            :picker-options="pickerOptions1"
            placeholder="选择日期"
          >
          el-date-picker>

          <el-date-picker
            v-model="value"
            type="month"
            :picker-options="pickerOptions2"
            placeholder="选择月份"
          >
          el-date-picker>
        div>
      template>
    div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            value: "",
            pickerOptions1: {
            // 禁用选择今日之后的日期
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
            // 禁用选择今日及其之后的日期
            //   disabledDate(time) {
            //     return time.getTime() > Date.now()-8.6e7;
            //   },
            },
            pickerOptions2: {
              disabledDate(time) {
                return (
                  moment(time).format("YYYY-MM") >
                  moment(Date.now()).format("YYYY-MM")
                );
              },
            },
          };
        },
      });
    script>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

在这里插入图片描述

类推下来，日期时间选择器也基本就这样用，就不罗嗦了，自己探索去吧

相关阅读:
看了“米小圈”，才知道竟然有如此宝藏的动画片
 Vue3之属性传值的四种情况
 用Python自制桌面版翻译软件
 三、Eureka
OpenCV 学习文章记录
 Android开发第二课
 Linux内存管理（二十二）：slub 分配器之kmem_cache_alloc
mysql分区表的增删改查操作
 window11安装Python环境
 pycharm 中的一个非常好使用的智能提示tabnine(大大提高代码的书写效率)
原文地址：https://blog.csdn.net/lalala_dxf/article/details/128143688