Vue自定义验证之日期时间选择器详解

目录
  • Vue自定义验证之日期时间选择器
    • 今日需求
    • 期望效果
    • 干货
    • 效果
  • vue项目时间选择器
    • html里面
    • js里面

Vue自定义验证之日期时间选择器

自定义验证 今日需求期望效果干货value-format 效果推荐

今日需求

查询条件中 当开始时间 和 结束时间 一致时 提示结束时间大于开始时间

期望效果

干货

    <el-form :inline="true" :rules="rules">
          <el-form-item label="创建时间" prop="createTime" class="create-time-item">
            <el-date-picker
              v-model="createTime"
              value-format="yyyy-MM-dd hh:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
    </el-form>    

	  export default {
	    data () {
	    // 自定义验证规则
	      var createTimeCheck = (rule, value, callback) => {
	        if (value === '') {
	          callback()    // 回调函数
	        } else {
	          let createTimeStart = this.createTime ? this.createTime[0] : ''    // 从数组中取出开始时间   取出结果:'2020-10-28 16:01:15'
	          let createTimeEnd = this.createTime ? this.createTime[1] : ''      // 取出结束时间
	          let sTime = (((createTimeStart.split(' '))[1]).split(':')).join('')    // 从 '2020-10-28 16:01:15' 取出时间 结果:‘160115'
	          let sDate = (((createTimeStart.split(' '))[0]).split('-')).join('')    // 取出开始日期 结果:‘20201028'
	          let endTime = (((createTimeEnd.split(' '))[1]).split(':')).join('')    // 取出结束时间
	          let endDate = (((createTimeEnd.split(' '))[0]).split('-')).join('')    // 取出结束日期
	          if (parseInt(endDate) > parseInt(sDate)) {    // 如果结束日期大于开始日期  不用判断时间
	            callback()
	          } else {
	            if (parseInt(endTime) <= parseInt(sTime)) {    // 如果结束日期不大于开始日期  判断结束时间是否大于开始时间
	              callback(new Error('结束日期必须大于开始日期'))
	            } else {
	              callback()
	            }
	          }
	        }
	      }

	      return {
		    createTime: '',     // 表单 时间 双向绑定值
		    rules: {            // 调用createTimeCheck 验证
               createTime: [
                  { validator: createTimeCheck, trigger: 'blur' }
               ]
             }
		  }
	   }

value-format

效果

注意看 当结束日期比开始日期小时 开始日期自动 与 结束日期同步, 所以结束日期永远大于等于开始日期

vue项目时间选择器

vue项目时间选择器 设置结束时间不能早于开始时间,开始时间不能晚于结束时间html里面:js里面

设置结束时间不能早于开始时间,开始时间不能晚于结束时间

html里面

<el-form-item label="发布时间:">
        <div class="form_item form_content">
          <div>
            <el-date-picker style="width:180px;" v-model="timerStart" :picker-options="pickerOptionsStart" type="date" placeholder="开始日期"></el-date-picker>
          </div>
          <div style="margin:0 15px;">-</div>
          <div>
            <el-date-picker style="width:180px;" v-model="timerEnd" :picker-options="pickerOptionsEnd" type="date" placeholder="结束日期"></el-date-picker>
          </div>
        </div>
</el-form-item>

js里面

<script>
	export default {
	  data() {
	    return {
	      timerStart: "", //开始日期选择
	      timerEnd: "", //结束日期选择
	      // 设置结束时间不能早于开始时间
	      pickerOptionsStart: {
	        disabledDate: time => {
	          const endDateVal = new Date(this.timerEnd).getTime();
	          if (endDateVal) {
	            return time.getTime() > endDateVal + 1;
	          }
	        }
	      },
	      pickerOptionsEnd: {
	        disabledDate: time => {
	          const beginDateVal = new Date(this.timerStart).getTime();
	          if (beginDateVal) {
	            return time.getTime() < beginDateVal + 1;
	          }
	        }
	       }
	     };
	  }
	}
 },
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 基于vue2.0+vuex的日期选择组件功能实现

    calendar vue日期选择组件 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的,查看了vuex后,发现vuex的写法还不是基于2.0的,所以就自己动手做了 demo展示&&项目中的使用 目录结构 demo 用vue-cli 的webpack-simple构建的 calendar |--dist build生成的目录 |--doc 展示图片 |--src |--assets 资源 |--components |--calendar 日期组件 |--

  • vue自定义可选时间的日历组件

    本文实例为大家分享了vue自定义可选时间日历组件的具体代码,供大家参考,具体内容如下 日历功能: 1.过去时间不可选择 2.可自定义不可选时间 3.本月默认展示当天,其他月展示第一天,若为不可选时间,往后顺延 效果图: -------下面开始表演----------- **首先,画出日历页面布局,参照win10系统日历布局*6行7列,为何如此,请自行理解-*本人也是"偷窥"来的 beginDay是当前月第一天的周几,prevMdays是上个月总天数,nowMdays是当月总天数,这样就

  • Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

    具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title> <!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script

  • Vue日期时间选择器组件使用方法详解

    本文实例为大家分享了Vue日期时间选择器组件的具体代码,供大家参考,具体内容如下 1.效果图如下 单选日期选择器 多选日期选择器 日期时间选择器 2.准备 Date原型格式化工具方法 Date.prototype.format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": thi

  • Vue自定义验证之日期时间选择器详解

    目录 Vue自定义验证之日期时间选择器 今日需求 期望效果 干货 效果 vue项目时间选择器 html里面 js里面 Vue自定义验证之日期时间选择器 自定义验证 今日需求期望效果干货value-format 效果推荐 今日需求 查询条件中 当开始时间 和 结束时间 一致时 提示结束时间大于开始时间 期望效果 干货 <el-form :inline="true" :rules="rules"> <el-form-item label="创

  • Android仿iPhone日期时间选择器详解

    本文实例为大家分享了Android仿iPhone时间选择器的具体代码,供大家参考,具体内容如下 先看效果图 如何使用 import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import android.app.Activity; import android.app.AlertDialog; import

  • Laravel 5.5 的自定义验证对象/类示例代码详解

    Laravel 5.5 将提供一个全新的自定义验证规则的对象,以作为原来的 Validator::extend 方法的替代. Laravel 5.5 将提供一个全新的自定义验证规则的对象,以作为原来的 Validator::extend 方法的替代..很多时候我们会直接用正则表达式来处理这种特殊的验证,也有时候我们会选择用 Validator::extend 来扩展一个自定义的规则.但在 Laravel 5.5 版本中,我们有了新的手段,只要定义一个实现 Illuminate\Contracts

  • mysql常用日期时间/数值函数详解(必看)

    1.日期时间函数 时间转化秒函数:time_to_sec MySQL> select time_to_sec('01:01:01'); +-------------------------+ | time_to_sec('01:01:01') | +-------------------------+ | 3661 | +-------------------------+ 1 row in set (0.00 sec) 秒转化时间函数:sec_to_time mysql> select se

  • vue 自定义组件的写法与用法详解

    三个技能,父组件 -> 子组件传值(props).子组件 -> 父组件传值(emit用来使这个独立的组件通过一些逻辑来融入其他组件中.举个具体点的例子,假如你要做一辆车,车轮是要封装的一个独立组件,props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹,图案等:而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来. (1)使用props可以实现父子组件之间的传值 (2)使用this.$emit()可是实现子组件调用父组件的方法 一.在commponents文

  • PostgreSQL中的日期/时间函数详解

    目录 零.前言 一.获取当前时间 二.时间的加减 三.格式化函数 3.1时间转字符串 3.2字符串转日期 3.3字符串转时间 3.4Unix时间戳转时间 四.一些重要函数 4.1时间间隔 4.2时间截取 五.时间的转换 六.收! 零.前言 公司里有一台阿里云RDS数据库用了PPAS(Postgres PlusTM Advanced Server),在处理日期/时间时遇到一些问题,花了点时间整理如下. 一.获取当前时间 select now() select current_timestamp s

  • BootStrap表单时间选择器详解

    前言 在大多数项目中 用户界面的时间选择是必不可少的,在项目的用户体验友好度这个大前提下,不让用户自己输入时间就显得格外的重要.而且用户输入时间还会存在格式不固定的问题,加大后台的开发量. 在这个时候就需要用到时间输入插件了,格式由我们自己设置,还减少了用户的输入环节提高了用户体验友好度 使用 bootStrap的时间插件datetimepicker支持界面多元化有专门的的一个网址来说明这个时间选择器 BootStrap时间选择器 Demo 利用插件所带的方法和时间.可以做一个简单的demo d

  • Python中的日期时间处理详解

    Python中关于时间.日期的处理库有三个:time.datetime和Calendar,其中datetime又有datetime.date.datetime.time.datetime.datetime三个类.而时间又可以分为时间戳.本地时间和UTC时间(世界标准时间).是不是听起来有点乱?那么他们相互之间有什么区别?有什么联系?又如何转换呢? time模块 在time模块中,时间有三种表现形式: 时间戳,一般指Unix时间戳,是从1970年开始到现在的秒数. 本地时间的struct_time

  • ASP.NET Core使用自定义验证属性控制访问权限详解

    前言 大家都知道在应用中,有时我们需要对访问的客户端进行有效性验证,只有提供有效凭证(AccessToken)的终端应用能访问我们的受控站点(如WebAPI站点),此时我们可以通过验证属性的方法来解决. 本文将详细介绍ASP.NET Core使用自定义验证属性控制访问权限的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下 一.public class Startup的配置: //启用跨域访问(不同端口也是跨域) services.AddCors(options

  • Vue2 cube-ui时间选择器详解

    目录 前言 一.需求及效果 需求 效果 二.代码实现 index.vue(html) date methods 测试效果 三.资料参考 input TimePicker(时间选择器) 详细在官网地址: 总结 前言 vue2 整合 cube-ui 时间选择器(供有点点基础的看) 一.需求及效果 需求 我们要在原搜索的情况下,加搜索时间 效果 二.代码实现 index.vue(html) <div class="header"> <cube-input v-on:focu

随机推荐