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

在这里插入图片描述

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

相关阅读:
一个关于 i++ 和 ++i 的面试题打趴了所有人
 linux安装新版本git2、配置github-ssh。(centos、aws)
lwIP 细节之四：ARP 相关知识
 供应链 | M&SOM论文解读：零售商响应定价能力对供应链韧性的影响
 【Python黑科技】获取每日一句美句，并定时发送邮件到指定邮箱（保姆级图文+实现代码）
步步精科技获得发明型专利，提升Type-C连接器行业竞争力
 持续集成（CICD）- gogs仓库的部署和使用
 ZYNQ之GPIO机制
 随机森林算法
 记一次性能飙升的Mysql CRUD数据表迁移到Clickhouse表的过程
原文地址：https://blog.csdn.net/lalala_dxf/article/details/128143688