vue+element 使用两个日期选择器做时间校验

最新推荐文章于 2024-06-06 09:36:55 发布
最新推荐文章于 2024-06-06 09:36:55 发布
阅读量4.7k 收藏 17
点赞数 8
分类专栏： 时间选择器 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zx894554911/article/details/121690982
版权

效果

 

本人使用的element版本为2.12.0

引入element

npm i element-ui  //下载element依赖

//main.js 引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

html部分

<template>
    <div>
        <el-form :model="searchForm" ref="searchForm" inline 
            style="text-align: left" label-position="left" :rules="searchFormRules">
            <el-form-item label="开始时间:" prop="startTime1" :label-width="labelWidth">
                <el-date-picker
                    style="width: 100%"
                    v-model="searchForm.startTime1"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="12:00:00"
                    :pickerOptions='startPickerOptions'
                >
                </el-date-picker>
                </el-form-item>

                <el-form-item label="结束时间:" prop="endTime1" :label-width="labelWidth" style="margin-bottom: 12px;">
                    <el-date-picker
                        style="width: 100%"
                        v-model="searchForm.endTime1"
                        type="datetime"
                        placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="12:00:00"
                        :pickerOptions='endPickerOptions'
                    >
                    </el-date-picker>
                </el-form-item>

                <el-button-group>
                    <el-button size="small" type="success"
                        @click.stop="action('searchForm')">新建
                    </el-button>
                </el-button-group>
         </el-form>
    </div>
</template>

js中 data部分

data(){
        // form表单自定义验证规则，开始时间不可大于结束时间
        var startTimeRules = (rule, value, callback) => {
            if(!value){
                callback(new Error('请选择开始时间'));
            }else{
                if(this.timeCompare()){
                    callback(new Error('开始时间必须小于结束时间'));
                }else {
                    callback();
                }
            }
        }
        // 结束时间不可小于开始时间
        var endTimeRules = (rule, value, callback) => {
            if(!value){
                callback(new Error('请选择结束时间'));
            }else{
                if(this.timeCompare()){
                    callback(new Error('结束时间必须大于开始时间'));
                }else {
                    callback();
                }
            }
        }
        return {
            searchForm: {
                startTime1: '',
                endTime1: '',
            },
            searchFormRules: {
                startTime1: [{ required: true, validator: startTimeRules, trigger: 'change' }],
                endTime1: [{ required: true, validator: endTimeRules, trigger: 'change' }]
            },
            labelWidth: '85px',
        }

计算属性computed

计算属性编写主要是处理禁选日期时间问题

computed: {
        startPickerOptions() {
            const that = this;
            return {
                disabledDate(time) {
                    if (that.searchForm.endTime1) {
                        // 判断年月日 结束时间选择后，开始时间 可以小于等于结束时间
                        return (
                            time.getTime() > new Date(that.searchForm.endTime1).getTime()  
                        );
                    }
                },
                // 开始时间时分秒 与 结束时间时分秒比对 主要是校验同一天的时分秒校验
                selectableRange: `00:00:00 - ${this.getNowTime('start')}`
            };
        },
        endPickerOptions() {
            const that = this;
            return {
                disabledDate(time) {
                    // 这是判断结束时间必须大于开始时间
                    if (that.searchForm.startTime1) {
                        // 判断年月日 结束时间选择后，开始时间 可以小于等于结束时间
                        return (
                            time.getTime() <= new Date(that.searchForm.startTime1).getTime()-24 * 60 * 60 * 1000
                        );
                    }

                    //这是判断结束时间必须大于开始时间  且大于当前时间
                    //if(new Date(that.searchForm.startTime1).getTime() >  new Date().getTime()){
                        //return ( 
                          //  time.getTime() <= new Date(that.searchForm.startTime1).getTime()-24 * 60 * 60 * 1000
                      //  );
                    //}else {
                       // return ( 
                            //time.getTime() < Date.now() - 8.64e7
                       // );
                    //} 
                    
                },
                // 开始时间时分秒 与 结束时间时分秒比对 主要是校验同一天的时分秒校验
                selectableRange: `${this.getNowTime('end')} - 23:59:59`
            };
        },
    },

根据业务需求调整computed的 两个属性，该属性就是控制时间选择是否被禁用

methods方法  

若结束时间仅需大于开始时间 

methods: {
        // 自定义form校验函数
        timeCompare(){
            let endDate = new Date(this.searchForm.endTime1);
            let endGetTime = endDate.getTime();
            let startDate = new Date(this.searchForm.startTime1);
            let startGetTime = startDate.getTime();
            if(startGetTime != 0 && endGetTime != 0 && startGetTime > endGetTime){
                return true
            }
        },
        // 禁用时间判断  本人没有封装和优化
        getNowTime(index){
            if(index == 'start'){
                //如果没有先选择结束时间  开始时间的时分秒可以选择0点--24点
                if(this.searchForm.endTime1 == ''){
                    return "23:59:59"
                }else{
                    let date = new Date(this.searchForm.endTime1);
                    // 获取结束时间的 年月日 时分秒
                    let endGetTime = date.getTime();
                    let endYear = date.getFullYear(); //获取年份
                    let endMonth = date.getMonth() + 1; // 获取月份
                    let endDay = date.getDate();
                    let hours = date.getHours();
                    let minute = date.getMinutes();
                    let second = date.getSeconds();
                    if (hours < 10) hours = '0' + hours;
                    if (minute < 10) minute = '0' + minute;
                    if (second < 10) second = '0' + second;
                    let timeStr = `${hours}:${minute}:${second}`;
                    // 获取开始时间的 年月日
                    let startDate = new Date(this.searchForm.startTime1);
                    let startGetTime = startDate.getTime();
                    let startYear = startDate.getFullYear(); //获取年份
                    let startMonth = startDate.getMonth() + 1; // 获取月份
                    let startDay = startDate.getDate();
                    
                    // 提示 如果结束时间戳小于开始时间戳  并且两者都不为0
                    if(endGetTime < startGetTime && startGetTime != 0 && endGetTime != 0){
                        this.$message({
                            message: '结束时间必须大于开始时间',
                            type: 'warning'
                        });
                    }
                    
                    // 如果结束时间与开始时间选择为同一天
                    if(startYear == endYear && startMonth == endMonth && startDay == endDay){                
                        // 选择0点到结束时间的时分秒之间
                        return timeStr;
                    }else{
                        // 如果不是同一天 开始时间时分秒任选
                        return "23:59:59"
                    }
                     
                }  
            }else{
                // 如果没有先选择开始时间  结束时间的时分秒可以选择0点--24点
                if(this.searchForm.startTime1 == ''){
                    return "00:00:00"
                }else{
                    let date = new Date(this.searchForm.startTime1);
                    // 获取开始时间的  年月日 时分秒
                    let startGetTime = date.getTime();
                    let startYear = date.getFullYear(); //获取年份
                    let startMonth = date.getMonth() + 1; // 获取月份
                    let startDay = date.getDate();
                    let hours = date.getHours();
                    let minute = date.getMinutes();
                    let second = date.getSeconds();
                    if (hours < 10) hours = '0' + hours;
                    if (minute < 10) minute = '0' + minute;
                    if (second < 10) second = '0' + second;
                    let timeStr = `${hours}:${minute}:${second}`;
                    
                    // 获取结束时间的 年月日 时分秒
                    let endDate = new Date(this.searchForm.endTime1);
                    let endGetTime = endDate.getTime();
                    let endYear = endDate.getFullYear(); //获取年份
                    let endMonth = endDate.getMonth() + 1; // 获取月份
                    let endDay = endDate.getDate();
                    
                    // 提示 如果结束时间戳小于开始时间戳  并且两者都不为0
                    if(startGetTime > endGetTime && startGetTime != 0 && endGetTime != 0){
                        this.$message({
                            message: '开始时间必须小于结束时间',
                            type: 'warning'
                        });
                    }
                    
                    //判断结束时间选择是否与开始时间是同一天 
                    if(startYear == endYear && startMonth == endMonth && startDay == endDay){
                        // 选择开始时间到24点的时分秒之间
                        return timeStr;
                    }else{
                        // 不是同一天 结束时间的时分秒任选
                        return "00:00:00";
                    }     
                }
            }
        },
        // 提交表单事件
        action(formName){
            let that = this;
            this.$refs[formName].validate((valid) => {
                if(valid){ 

                }
            })
        }  
}

若结束时间大于开始时间，且大于当前时间，则

methods: {
        timeCompare(){
            let endDate = new Date(this.searchForm.endTime1);
            let endGetTime = endDate.getTime();
            let startDate = new Date(this.searchForm.startTime1);
            let startGetTime = startDate.getTime();
            if(startGetTime != 0 && endGetTime != 0 && startGetTime > endGetTime){
                return true
            }
        },
        getNowTime(index){
            if(index == 'start'){
                if(this.searchForm.endTime1 == ''){
                    return "23:59:59"
                }else{
                    let date = new Date(this.searchForm.endTime1);
                    let endGetTime = date.getTime();
                    let endYear = date.getFullYear(); //获取年份
                    let endMonth = date.getMonth() + 1; // 获取月份
                    let endDay = date.getDate();
                    let hours = date.getHours();
                    let minute = date.getMinutes();
                    let second = date.getSeconds();
                    if (hours < 10) hours = '0' + hours;
                    if (minute < 10) minute = '0' + minute;
                    if (second < 10) second = '0' + second;
                    let timeStr = `${hours}:${minute}:${second}`;

                    let startDate = new Date(this.searchForm.startTime1);
                    let startGetTime = startDate.getTime();
                    let startYear = startDate.getFullYear(); //获取年份
                    let startMonth = startDate.getMonth() + 1; // 获取月份
                    let startDay = startDate.getDate();

                    if(endGetTime < startGetTime && startGetTime != 0 && endGetTime != 0){
                        this.$message({
                            message: '结束时间必须大于开始时间',
                            type: 'warning'
                        });
                    }

                    if(startYear == endYear && startMonth == endMonth && startDay == endDay){
                        return timeStr;
                    }else{
                        return "23:59:59"
                    }

                }  
            }else{
                // 获取当前时间的 年月日 时分秒 
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth() + 1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes():new Date().getMinutes();
                let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds():new Date().getSeconds();
                if(this.searchForm.startTime1 == ''){
                    return hh + ':' + mf + ':' +ss
                }else{
                    let date = new Date(this.searchForm.startTime1);
                    let startGetTime = date.getTime();
                    let startYear = date.getFullYear(); //获取年份
                    let startMonth = date.getMonth() + 1; // 获取月份
                    let startDay = date.getDate();
                    let hours = date.getHours();
                    let minute = date.getMinutes();
                    let second = date.getSeconds();
                    if (hours < 10) hours = '0' + hours;
                    if (minute < 10) minute = '0' + minute;
                    if (second < 10) second = '0' + second;
                    let timeStr = `${hours}:${minute}:${second}`;

                    let endDate = new Date(this.searchForm.endTime1);
                    let endGetTime = endDate.getTime();
                    let endYear = endDate.getFullYear(); //获取年份
                    let endMonth = endDate.getMonth() + 1; // 获取月份
                    let endDay = endDate.getDate();


                    if(startGetTime > endGetTime && startGetTime != 0 && endGetTime != 0) {
                        this.$message({
                            message: '开始时间必须小于结束时间',
                            type: 'warning'
                        });
                    }
                    
                    //判断开始时间与结束时间是不是同一天 主要是大于当前年月日
                    if(startYear == endYear && startMonth == endMonth && startDay == endDay){

                        return timeStr;
                     //如果开始时间与结束时间不同天  但结束时间等于当前年月日 则结束时分秒必须选择大于当前时分秒的时间
                    }else if(endYear == yy && endMonth == mm && endDay == dd){
                        timeStr = hh + ':' + mf + ':' + ss;
                        return timeStr;
                    }else{
                      
                        return "00:00:00";
                    }     
                }
            }
        },
        action(formName){
            let that = this;
            this.$refs[formName].validate((valid) => {
                if(valid){ 

                }
            })
        }    
    }

methods中的getNowTime方法没有优化，等待大神优化

由于无法控制选择器的现实隐藏，只能使用form表单验证提示选择时间是否出现问题，及消息提示来告知用户

zx894554911
关注
  • 8
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element el-date-picker 表单校验和数据回显问题解决方法详解
pleaseprintf的博客
06-29 4794
在 Vue.js 开发中，使用 Element UI 组件库的 el-date-picker 组件可以方便地实现日期选择功能。然而，在表单校验和数据回显方面可能会遇到一些问题。本文将详细介绍如何解决 Element el-date-picker 组件在表单校验和数据回显过程中的常见问题。如果需要对 el-date-picker 进行更复杂的校验，可以自定义校验方法。data() {return {// 自定义禁用日期规则 return time . getTime() > Date . now();
vue element ui 时间选择器设置
01-07
需求：设置时间选择器,只能选择2018-01-01之后切小于当前时间的数据 data() { return { pickerOptions0: { disabledDate: time => { // 使用2018年的毫秒时间戳判断 return time.getTime() Date.now(); } ...
el-date-picker分段式时间范围选择器双向校验
Lccccb的博客
08-18 348
【代码】el-date-picker分段式时间范围选择器双向校验。
el-date-picker设置结束时间为23:59:59
最新发布
FIRE
06-06 482
el-date-picker设置结束时间为23:59:59。
vue element ui TimePicker 时间选择器校验结束时间大于起始时间 使用selectableRange 动态校验 （只针对“时”“分”“秒”）
热门推荐
让心在跳动
02-04 1万+
项目要求结束时间大于开始时间 （时，分，秒） element ui TimePicker 时间选择器 基本结构 <el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"> </el-time-picker> 代码如下 <el-time-picker .
Vue+element 完成结束时间大于开始时间，开始时间小于结束时间
weixin_46711427的博客
03-09 1518
项目很多时候会遇到这个开始，结束时间选择的场景，如果没有做限制就会出现结束时间可以小于开始时间的问题，用户体验很不好。 html： <el-form-itemlabel="汇交开始时间"> <el-date-picker :picker-options="pickerStartTime"v-model="form.startTime"type="date" ...
vue+element-ui 校验开始时间与结束时间
m0_56272227的博客
11-04 2303
校验开始时间与结束时间
[element-ui] el-date-picker a-range-picker type=“daterange“ rules 校验
Study123wf的博客
08-20 1112
[element-ui] el-date-picker a-range-picker type=“daterange“ rules 校验
Vue-element 日期校验 结束时间大于开始时间
小米粒的博客
07-28 4837
1、定义templete <el-form-item :label="$t('execution.StartingTime')" prop="startDateTime"> <el-date-picker v-model="startDateTime" type="datetime" placeholder="年/月/日 时:分:秒" value-form
vue+element自定义表单生成.rar
04-15
在“vue+element自定义表单生成.rar”这个压缩包中，我们主要探讨的是如何利用Vue.js和Element UI来实现自定义表单的生成。表单在Web应用中占据重要地位，用于收集用户输入的数据。Vue.js的响应式数据绑定和计算属性...
尖峰平谷布局大小缩减版（vue2+element）
03-13
"尖峰平谷布局大小缩减版（vue2+element）"是基于Vue.js 2.x版本和Element UI库的一个项目，它提供了一个轻量级的选择器组件，特别适用于空间有限的场景。这个组件在设计时考虑了性能和用户体验，同时保持了较低的...
vue基于element的区间选择组件
12-29
但是苦于element中没有非常契合的组件（slider组件并不支持两端均能设定），于是自己动手造了一个。 成果 最终的展示效果如下： 需求 这里以项目的需求为例，基本的需求如下： 分为左右值，包含左右值，正整数 ...
vue3+时间选择器+免打扰时间
08-01
在Vue3框架中，开发一个具有时间选择器和免打扰时间功能的应用，是现代Web应用中常见且实用的需求。Vue3作为一个轻量级且高效前端框架，提供了强大的响应式数据绑定和组件化特性，使得这样的功能实现变得简单易行。...
element UI 自定义日期范围校验规则
My_Soul_的博客
03-05 2205
日期校验.js import moment from 'moment' export default function dateValidator(rule, value, callback) { const dateType = rule.dateType || 'days' const num = rule.num || 31 const dateString = rule.dateString || '天' const message = rule.message || `时间
最详细前端vue框架实现结束日期大于开始日期以及计算两个日期天数差
qq_51568712的博客
09-29 1979
这里说的是两个分开的日期选择框，连在一起的日期选择框可以看element ui上提供的写法
vue3 +element-ui 实现时间选择器并校验开始时间小于结束时间
weixin_52803316的博客
03-30 1439
vue3 +element-ui 实现时间选择器并校验开始时间小于结束时间
vue----独立的两个date-picker开始时间和结束时间的校验(结束时间应该大于开始时间)
wlijun_0808的博客
06-03 1210
vue----独立的两个date-picker开始时间和结束时间的校验(结束时间应该大于开始时间)
element form校验两个时间选择框的范围（开始时间不能大于结束时间）
qq_37831545的博客
08-04 1608
element form校验两个时间选择框的范围（开始时间不能大于结束时间）判断起始时间，提示两个时间是否满足 结束时间>=开始时间
写一个vue的后台管理页面
09-09
写一个 Vue 的后台管理页面，需要您掌握一定的 Vue 开发基础。下面是大致的步骤： 1. 安装 Vue CLI：如果您的电脑上还没有安装 Vue CLI，可以通过运行命令行中的以下命令来安装： ``` npm install -g @vue/cli ``` 2. 创建项目：使用 Vue CLI 创建一个新的 Vue 项目，命令如下： ``` vue create my-admin ``` 3. 安装需要的依赖：在您的项目中安装需要的组件和插件，如 UI 组件库、路由、状态管理等。 4. 编写页面组件：创建您的页面组件，使用 Vue 的语法和组件实现页面布局和功能。 5. 配置路由：使用 Vue Router 设置应用程序的路由，实现页面之间的跳转。 6. 启动应用：通过运行以下命令启动您的应用： ``` npm run serve ``` 7. 部署：当您的项目开发完成后，可以将其部署到生产环境中，以便其他人使用。 以上是写一个 Vue 后台管理页面的大致步骤，但更具体的实现细节还需要您自己去学习和实践。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值