vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)

vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证):

html:

<el-form-item label="活动时间" required>
                <el-col :xs="24" :sm="11" :md="7" :lg="5" class="startTime">
                    <el-form-item  prop="start_time">
                        <el-date-picker
                                type="datetime"
                                placeholder="起始时间"
                                v-model="activityInfo.start_time"
                                :picker-options="pickerBeginDateBefore"
                                style="width: 100%;"
                                ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" style="width:20px;text-align:center">至</el-col>
                <el-col :xs="22" :sm="11" :md="7" :lg="5" class="endTime">
                    <el-form-item prop="end_time">
                        <el-date-picker
                                type="datetime"
                                placeholder="结束时间"
                                v-model="activityInfo.end_time"
                                :picker-options="pickerBeginDateAfter"
                                :disabled="activityInfo.is_long"
                                style="width: 100%;"
                                ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="5" class="longTime">
                    <el-form-item label-width="7px" prop="is_long">
                        <el-checkbox v-model="activityInfo.is_long" :true-label="1" :false-label="0">长期</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-form-item>

  js(在data的定义中):

 pickerBeginDateBefore:{
                disabledDate: (time) => {
                        let beginDateVal =new Date( this.activityInfo.end_time).getTime();
                        if (beginDateVal) {
                                return (time.getTime() > beginDateVal) ||(time.getTime() < Date.now() - 8.64e7);
                        }else{
                            return time.getTime() < Date.now() - 8.64e7
                        }
                    }
            },
            pickerBeginDateAfter:{
                disabledDate: (time) => {
                    let beginDateVal = new Date(this.activityInfo.start_time).getTime();
                    if (beginDateVal) {
                        return time.getTime() < (beginDateVal-24*60*60*1000);
                    }
                }

            },

  输入验证:

//在rules中:
start_time:[
                    {  required: true, message: ‘请选择起始时间‘, trigger: ‘change‘ }
                ],
                end_time:[
                    { validator: checkEndTime, trigger: ‘change‘ }
                   /* {  required: true, message: ‘请选择结束时间‘, trigger: ‘change‘ }*/
                ],

//自定义的验证函数:
checkEndTime=function(rule, value, callback){
        /*var isLongTime=$($(".longTime").find(".el-checkbox__input")[0]).hasClass("is-checked")
        if(!value && !isLongTime) {
            return callback(new Error(‘请选择结束时间‘));
        }*/
        if(!activity_edit.activityInfo.is_long && !value){
            return callback(new Error(‘请选择结束时间‘));
        }
        callback();
    };

  

值的类型转换(在watch中):

"activityInfo.start_time":{
                handler: function (val, oldVal) {
                    var _this=this;
                    if(val){
                        _this.activityInfo.start_time=_this.getDayTime(_this.activityInfo.start_time,true);
                    }
                },
                deep: true
            },
            "activityInfo.end_time":{
                handler: function (val, oldVal) {
                    var _this=this;
                    if(val){
                        _this.activityInfo.end_time=_this.getDayTime(_this.activityInfo.end_time,true);
                    }
                },
                deep: true
            },

  

时间: 2024-08-29 00:29:46

vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)的相关文章

vue+elementui 封装表单验证

其实很简单:步骤1:先用element 把页面写出来:步骤2.规则验证,需要自定义验证的,引入对应的自定义验证方法, 3.封装一个自定义验证的js. 1.先把结构写出来: 注意: from 表单上有model(绑定数据),ref(提交的时有用),rules(对表单的验证规则),这三者缺一不可. 2.代码: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width

element ui实现起始时间不能大于结束时间

<template> <div class="app-container"> <el-date-picker v-model="filters.column.create_start_date" type="date" :picker-options="pickerBeginDateBefore" format="yyyy-MM-dd" placeholder="开始

javascript 中的时间戳转换时间 根据时间字符判断星期几 根据开始时间结束时间获取中间间隔时间 来自转发

//时间戳转换时间      function timedat(res){   //res 为传入的时间戳   例:1509091800000 var time = new Date(res); var y = time.getFullYear(); var m = time.getMonth()+1; var d = time.getDate(); return y+'-'+m+'-'+d;    //返回格式  "2017-10-27" 字符串    }; //根据时间判断星期几 

numpy中arange函数内起始值必须大于结束值,否则生成为空的一维数组

1 >>> import numpy as np 2 >>> arr=np.arange(10,0.1) 3 >>> print('a=',arr) 4 a= [] 5 >>> arr=np.arange(10) 6 >>> print('a=',arr) 7 a= [0 1 2 3 4 5 6 7 8 9] 8 >>> arr=np.arange(0,10,0.1) 9 >>>

myDatePinker设置开始时间不能大于结束时间

 操作时间起:  <input type="text" name="startTime" id="startTime" style="width:90px;color:#999999; " value="<c:if test ="${not empty startTime}">${fn:substring(startTime,0,10)}</c:if><c:if

使用WdatePicker时间插件限制页面上两个时间的前后范围

大多时候,开始时间&结束时间都是开始时间肯定不能大于结束时间,结束时间不能比开始时间还早吧,用WdatePicker插件选择时间的话可以很好的做好时间段的控制. 页面上的两个时间输入框: 开始时间: <input type="text" name="startDate" id="startDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" /> 结束时间:

My97DatePicker设置开始时间与结束时间控制以及js中时间的比较

每次使用时间插件都会使用到My97DatePicker,这确实是一款不错的插件,而且新版本的兼容性也不错,兼容ie. 关于时间设置一般会遇到一些问题. <ul> <li> <span style="font-size:12px;">起始:</span> <label> <input type="text"id="starttime" readonly="readonly&

bootstrap-datetimepicker 进一步跟进~~~开始时间和结束时间的样式显示

上次简单介绍了一下:05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器(http://www.cnblogs.com/dunitian/p/5524019.html) 这次深入再介绍一下,比如开始时间和结束时间(主要就是从时间控件开始限制==>让结束时间只能选择>=开始时间的时间) 实现很简单,改变时间的时候设置一下结束时间从什么时候开始 先看看官方2个案例,两个案例一综合就有了~ 代码如下: 效果:

处理开始时间和结束时间先后问题

//时间顺序处理 $('#start').change(function () { startTime = $('#start').val(); endTime = $('#end').val(); if ((startTime > endTime)&&(endTime!="")) { dialog({ onshow: function () { var obj = this; this.content('<span class="text-dan