文章目录

• 前言
• 一、引入elementui
• • 1.npm下载插件
  • 2.引入elementUI
  • • 2.1 全局引用
    • 2.2 按需引用，需要下载babel
    • 2.3引入ElementUI的日期选择器DatePicker
• 二、实现多时间段禁用
• 总结

前言

本文将讲解如何在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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！