vue+ElementUI日期选择器实现禁用多时间段

---

前言

本文将讲解如何在vue中使用elementui的日期选择器，如何同时禁用多个时间段，以及终止日期不能选择起始日期之前的日期。这里以订房选择日期为例，效果如下。

1.选择起始日期（已被预订的日期不能选）:

2.选择终止日期（入住日期是6/11,则退房日期不能选11号之前）：

一、引入elementui

1.npm下载插件

npm i element-ui -S

2.引入elementUI

2.1 全局引用

在main.js中注册插件并初始化

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

2.2 按需引用，需要下载babel

先简单介绍一下babel

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：
• 语法转换
• 通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方 polyfill 模块，例如 core-js，实现）
• 源码转换 (codemods)
具体用法见官网

在主目录下创建babel.config.js文件，写入

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    "plugins": [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ]
    ]

}

接下来就可以在需要的地方引入组件。

2.3引入ElementUI的日期选择器DatePicker

import { DatePicker, Message } from 'element-ui'

到这里，我们就成功引入了elementui，接下来使用组件提供的代码进行渲染。

二、实现多时间段禁用

1.在css中直接使用组件代码

2.在data中初始化pickerOptions0，pickerOptions1

<script>
import axios from "axios";
export default {
  name: "addOrder",
  props: {
    detailList: Array,
    discount: {},
  },
  data() {
    return {
      pickerOptions0: {},
      pickerOptions1: {},
      value1: "",//起始日期
      value2: "",//终止日期
    };
  }, 
  methods:{
  
  }
 }
</script>

3.接着在选择器加上绑定事件 @focus=“getDat”，每当点击日期选择器，回调该函数。
在函数中先调用后端接口获取禁用时间段list：

在请求接口后，分别对两个参数设置禁用状态disabledDate。用||来连接多个时间段。

//起始日期
this.pickerOptions0 = Object.assign({}, this.pickerOptions0, {
        disabledDate: (time) => {
          const today = new Date().toLocaleDateString();
          //禁用这一天之前的日期
          let disable = time < new Date(today);
          //循环后端返回的数据，禁用时间大于dayStart小于dayEnd，注意dayStart要减去一天，才能真正禁用dayStart这一天。
          list.forEach((item) => {
            disable =
              disable ||
              (time.getTime() > new Date(item.dayStart).getTime() - 8.64e7 &&
                time.getTime() < new Date(item.dayEnd).getTime()); //减去一天8.64e7
          });
          return disable;
        },
      });
      //终止日期
      this.pickerOptions1 = Object.assign({}, this.pickerOptions1, {
        disabledDate: (time) => {
          const today = new Date().toLocaleDateString();
		//禁用起始日期(value1)之前的日期
          let disable = time < new Date(value1);
          //循环后端返回的数据，禁用时间大于dayStart小于dayEnd，注意dayStart要减去一天，才能真正禁用dayStart这一天。
          list.forEach((item) => {
            disable =
              disable ||
              (time.getTime() > new Date(item.dayStart).getTime() - 8.64e7 &&
                time.getTime() < new Date(item.dayEnd).getTime()); //减去一天8.64e7
          });
          return disable;
        },
      });

总结

本文主要介绍了如何设置pickerOptions参数来实现禁用多时间段，在elementUI的官网给的例子中，pickerOptions参数是写死的。如果要对其进行较复杂操作，还是给它定义一个函数，在methods中去实现比较好。要注意的是，time.getTime() > new Date(item.dayStart).getTime()会默认不算上daystart这一天，所以需要减去8.64e7