精华内容
下载资源
问答
  • ElementUI DatePicker 日期选择器控制选择时间范围 选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerO...

    ElementUI DatePicker 日期选择器控制选择时间范围

    选择今天以及今天之后的日期

    <el-date-picker
           v-model="value1"
           type="date"
           placeholder="选择日期"
           :picker-options="pickerOptions0">
    </el-date-picker>
    
    data(){
        return {
            pickerOptions0: { 
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
                }
            }
        }  
    }

    选择今天以及今天以前的日期

    data (){
       return {
           pickerOptions0: {
              disabledDate(time) {
                return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
              }
            },  
       }     
    }
    

    限制结束日期不能大于开始日期

    <el-date-picker
           v-model="value1"
           type="date"
           placeholder="开始日期"
           :picker-options="pickerOptions0">
    </el-date-picker>
    <el-date-picker
           v-model="value2"
           type="date"
           placeholder="结束日期"
           :picker-options="pickerOptions1">
    </el-date-picker>
    
    data(){
        return {
             pickerOptions0: {
                    disabledDate: (time) => {
                        if (this.value2 != "") {
                            return time.getTime() >  new Date(this.value2).getTime();
     
                    }
                },
                pickerOptions1: {
                    disabledDate: (time) => {
                        return time.getTime() < new Date(this.value1).getTime()- 1*24*60*60*1000;//减去一天的时间代表可以选择同一天;
                    }
                },
        }      
    }

    限制选择开始时间不能小于当前时间。并且结束时间不能大于开始时间(比上面多了层限时)

    pickerOptions0: {
        //结束时间不能大于开始时间
        disabledDate: time => {
            if (this.addForm.date_range_end) {
                return (
                    time.getTime() >
                    new Date(this.addForm.date_range_end).getTime()
                );
            } else {
                //还没有选择结束时间的时候,让他只能选择今天之后的时间包括今天
                return time.getTime() < Date.now() - 8.64e7;
            }
        }
    },
    pickerOptions1: {
        disabledDate: time => {
            if (this.addForm.date_range_start) {
                return (
                    time.getTime() <
                    new Date(this.addForm.date_range_start).getTime() -
                        1 * 24 * 60 * 60 * 1000
                ); //可以选择同一天
            }
        }
    },

     

    posted @ 2019-03-20 14:25 <_/> 阅读(...) 评论(...) 编辑 收藏
    展开全文
  • elementUI日期时间选择器范围(精确到,时、分、秒。????️) 一、html <el-date-picker v-model="record.createTime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" type="datetime" ...

    elementUI日期时间选择器范围(精确到,时、分、秒。🈲️)

    一、html

    <el-date-picker
       v-model="record.createTime"
       :picker-options="pickerOptions"
       format="yyyy-MM-dd HH:mm:ss"
       type="datetime"
       placeholder="选择日期时间"
     />
    

    在这里插入图片描述

    二、data部分

    pickerOptions: {
     disabledDate(time) {
         const dateTime = new Date()
         const startDateTime = dateTime.setDate(dateTime.getDate() - 1)
         const endDateTime = dateTime.setDate(dateTime.getDate() + 7)
         return (
           time.getTime() < new Date(startDateTime).getTime() ||
           time.getTime() > new Date(endDateTime).getTime()
         )
       },
       selectableRange:
       parseTime(new Date('2020-08-04 10:50:50'), '{hh}:{ii}:{ss}') + '- 23:59:00'
    }
    

    三、对代码进行一下说明

    在这里插入图片描述

    四、这是引入的格式化方式

    在这里插入图片描述

    export function parseTime(time, cFormat) {
      if (arguments.length === 0) {
        return null
      }
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
          time = parseInt(time)
        }
        if (typeof time === 'number' && time.toString().length === 10) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
          return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        return value.toString().padStart(2, '0')
      })
      return time_str
    }
    

    在这里插入图片描述

    愿你走路不迷路,天天有钱花、伤心有人陪

    展开全文
  • ElementUI 日期选择器 datepicker选择范围限制 在使用 el-date-picker 的时候,经常会对选择的时间进行一定限制,所以今天就总结了一些范围 1、第一步 给 el-date-picker 组件添加 picker-options 属性,并绑定 对应...

    ElementUI 日期选择器 datepicker选择范围限制

    在使用 el-date-picker 的时候,经常会对选择的时间进行一定限制,所以今天就总结了一些范围

    1、第一步 给 el-date-picker 组件添加 picker-options 属性,并绑定 对应数据 pickerOptions

    在这里插入图片描述

    2、对绑定的数据进行限制

    单个选择框的限制

    2.1 设置今天及最近一年内的日期(包含今天)

    data(){
    return {
    pickerOptions:{
     disabledDate(time){
       let nowDate = (new Date()).toString()  // 当前时间转字符串
       let nowDateYear = (new Date()).getFullYear()  // 当前时间的年份
       let oneYearAgoDate = nowDate.replace(nowDateYear,nowDateYear-1)  //字符串年份替换为一年前
       let oneYear = new Date(oneYearAgoDate).getTime()  //一年前字符串转为时间戳
       return time.getTime() > Date.now() || time.getTime() < oneYear
     }},}}
    

    2.2 设置今天及今天之后的日期

    data(){
    return {
    pickerOptions:{
     disabledDate(time){
       return time.getTime() < Date.now() - 8.64e7;
     }},}}
    

    2.3 设置今天及今天以前的日期

    data(){
    return {
    pickerOptions:{
     disabledDate(time){
       return time.getTime() > Date.now() - 8.64e7;
     }},}}
    

    2.4 设置选择今天之后的日期(不包含当天时间)

    data(){
    return {
    pickerOptions:{
     disabledDate(time){
       return time.getTime() < Date.now();
     }},}}
    

    2.5 选择今天之前的时间(不包含当天时间)

    data(){
    return {
    pickerOptions:{
     disabledDate(time){
       return time.getTime() > Date.now();
     }},}}
    

    2.6 设置选择三个月之前到今天的日期

    data(){
    return {
    pickerOptions:{
     disabledDate(time){
    	let nowDate = (new Date()).getTime();
    	let three = 90*24*3600*1000;
    	let threeMonths = nowDate - three;
    		return time.getTime() > Date.now() || time.getTime() < threeMonths
     }},}}
    

    两个日期选择框的限制

    3.1 设置开始时间不能大于结束时间 (且只能选择当前时间之前的日期)

    data(){
        return {
            pickerOptions0: {
                disabledDate: (time) => {
                    if (this.value2) {
                        return time.getTime() > Date.now() || time.getTime() > this.value2;
                    } else {
                        return time.getTime() > Date.now();
                    }
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < this.value1 || time.getTime() > Date.now();
                }
            }
        }    
    }
    

    3.2 设置开始时间不能大于结束时间(可以选择所有日期)

    data(){
        return {
            pickerOptions0: {
                disabledDate: (time) => {
                    if (this.value2) {
                       return time.getTime() > this.searchForm.endTime
                    }
                }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < this.searchForm.startTime
                }
            }
        }    
    }
    
    展开全文
  • elementUI 日期选择器 设置正常的起始结束日期选择范围 vue data部分: data(){ return { startDate:'', endDate:'', startTime: { disabledDate: time => { if (this.endDate) { //必须早于结束日期

    elementUI 日期选择器 设置正常的起始结束日期选择范围

    vue
    data部分:

    	 data(){
                return {
                    startDate:'',
                	endDate:'',
                	startTime: { disabledDate: time => {
                    	if (this.endDate) {
                            //必须早于结束日期
                        	return (
                            	time.getTime() > new Date(this.endDate).getTime()
                        	)
                    	} else {
                        	// 不能早于当前日期
                        	return time.getTime() > Date.now()
                    	}
                	}},
                	endTime: { disabledDate: time => {
                    	if (this.startDate){
                            //  不能早于开始日期
                        	return time.getTime()<new Date(this.startDate).getTime();
                    	}
                	}},  
                }
           }
    		   
    

    html部分:

          <!-- format 指定输入框的格式 		value-format指定绑定值的格式-->
    	  <el-date-picker
               v-model="startDate"
               type="date"
               format="yyyy-MM-dd"	
               value-format="yyyy-MM-dd"
               :picker-options="startTime"
               placeholder="选择开始日期">
           </el-date-picker>
           <el-date-picker
               v-model="endDate"
               type="date"
               format="yyyy-MM-dd"
               value-format="yyyy-MM-dd"
               :picker-options="endTime"
               placeholder="选择结束日期">
           </el-date-picker>
    
    展开全文
  • ElementUI日期选择器时间选择范围限制单个输入框的两个输入框 ElementUI是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细,这里做一个element-ui日期插件的补充。 官方文档中使用picker-options属性...
  • 组件代码: <el-date-picker v-model="value1" ... placeholder="选择日期" :picker-options="pickerOptions0"> </el-date-picker> 情景1: 设置选择今天以及今天之后的日期 data (){ retu...
  • 最近做项目用到了datepicker,需要对日期选择做一些限制,以下情景:选择的时间范围最多为一年,而且只能选择当前日期之前的,2016-01-01之后的日期,代码如下: data() { return { type...
  • <el-date-picker type="date" v-model="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions" placeholder="请选择日期" @change="c...
  • 在使用elementUI日期选择器时,经常会遇到这样的需求——对可选择的时间范围有一定限制,比如我遇到的就是:只能选择今天以前的一年以内的日期。查阅官方文档,我们发现它介绍的并不详细,下面我们就来详细介绍...
  • ElementUI是饿了么推出的一套基于vue2.x的一...官方文档中使用picker-options属性来限制可选择日期,这里举例子稍做补充。 单个输入框的 组件代码: <el-date-picker v-model="value1" type="date" plac...
  • 官方文档也很详细,这里做一个element-ui日期插件的补充,官方文档中使用picker-options属性来限制可选择日期,这里举例子稍做补充。 一、单个输入框的 //组件代码 <el-date-picker v-model="value1" ...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 163
精华内容 65
关键字:

elementui日期范围选择器