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",<