精华内容
下载资源
问答
  • 2021-07-26 18:19:21

    代码部分:主要disabledDate

    <a-date-picker :disabled-date="disabledDate" @change="onChange" v-model="dateTime"/>

    js部分:

    methods:{
            //指定日期之前的不可选择
            disabledDate(current) {
                var now = '2021-07-01';
                var moment = this.$moment(now,'YYYY-MM-DD');
                return current < moment;
            },
        }

    更多相关内容
  • 1、a-date-picker:默认当天,限制选择未来日期(后台需要日期区间参数) <a-col :xxl="5" :xl="6" :lg="12"> <a-form-item label="时间" :labelCol="{ span: 4 }" :wrapperCol="{ span: 19 }" > &...
    1、a-date-picker:默认当天,限制选择未来日期(后台需要日期区间参数)

    在这里插入图片描述

    <a-col :xxl="5" :xl="6" :lg="12">
      <a-form-item
        label="时间"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 19 }"
      >
        <a-date-picker
          style="width: 100%"
          v-decorator="['timeForm']"
          format="YYYY-MM-DD"
          :disabledDate="disabledDate"
        />
      </a-form-item>
    </a-col>
    // 初始化
    created() {
      this.$nextTick(() => {
        // 初始化时间
        let timeData = this.configForm.getFieldsValue();
        if(!timeData.timeForm) {
          timeData.startTime = moment().format("YYYY-MM-DD");
          timeData.endTime = moment().format("YYYY-MM-DD");
          this.configForm.setFieldsValue({
            timeForm: moment().format("YYYY-MM-DD")
          })
          delete timeData.timeForm
        } else {
          timeData.startTime = this.configForm.getFieldValue('timeForm');
          timeData.endTime = this.configForm.getFieldValue('timeForm');
          delete timeData.timeForm
        }
      });
    },
    methods:{
        // 获取筛选区域参数
        getQuery() {
          let query = this.configForm.getFieldsValue();
          if(!query.timeForm) {
            query.startTime = moment().format('YYYY-MM-DD');
            query.endTime = moment().format('YYYY-MM-DD');
            this.configForm.setFieldsValue({
              timeForm: moment().format('YYYY-MM-DD')
            })
            delete query.timeForm
          } else {
            query.startTime = moment(query.timeForm).format("YYYY-MM-DD");
            query.endTime = moment(query.timeForm).format("YYYY-MM-DD");
            delete query.timeForm
          }
          return query
        },
    }
    
    
    2、a-week-picker: 默认当前周,限制选中未来的周(将选中周转成当周的周一日期和周日的日期)

    在这里插入图片描述

    <a-col :xxl="5" :xl="6" :lg="12">
      <a-form-item
        label="时间"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 19 }"
      >
        <a-week-picker
          v-decorator="['timeForm']"
          style="width: 100%"
          format="YYYY年-第wo"
          :disabledDate="disabledDate"
        />
      </a-form-item>
    </a-col>
    created() {
      this.$nextTick(() => {
        let timeData = this.configForm.getFieldsValue();
        if(!timeData.timeForm) {
          timeData.starTime = moment().startOf("week").format("YYYY-MM-DD");
          timeData.endTime = moment().startOf("day").format("YYYY-MM-DD");
          // console.log(moment().weeks()); // 组件文档是显示第十周,因为语言环境不同(en-US(从周日开始) 与 zh-cn(从周一开始))  http://momentjs.cn/docs/#/get-set/   (week())
          this.configForm.setFieldsValue({
            timeForm: moment()
          })
          delete timeData.timeForm
        } else {
          timeData.starTime = moment(timeData.timeForm).weekday(0).format('YYYY-MM-DD');
          timeData.endTime = moment(timeData.timeForm).weekday(6).format('YYYY-MM-DD');
          delete timeData.timeForm
        }
      });
    },
    methods:{
        // 获取搜索条件
        getQuery() {
          let query = this.configForm.getFieldsValue();
          if(!query.timeForm) {
            query.starTime = moment().startOf("week").format("YYYY-MM-DD");
            query.endTime = moment().startOf("day").format("YYYY-MM-DD");
            this.configForm.setFieldsValue({
              timeForm: moment()
            })
            delete query.timeForm
          } else {
            query.starTime = moment(query.timeForm).weekday(0).format('YYYY-MM-DD');
            query.endTime = moment(query.timeForm).weekday(6).format('YYYY-MM-DD');
            delete query.timeForm
          }
          return query
        },
    }
    
    3、注意点(语言环境不同,相同日期显示的周有可能不同):en-US(从周日开始) 与 zh-cn(从周一开始), moment.js官方文档:http://momentjs.cn/docs/#/get-set/week/

    在这里插入图片描述

    4、a-month-picker: 默认当前月(当前月1号 - 当前日)(选中月份转成选中月1号 - 选中月月末最后一天日期)

    在这里插入图片描述

    <a-col :xxl="5" :xl="6" :lg="12">
      <a-form-item
        label="时间"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 19 }"
      >
        <a-month-picker
          v-decorator="['timeForm']"
          format="YYYY-MM"
          style="width: 100%"
          :disabledDate="disabledDate"
        />
      </a-form-item>
    </a-col>
    created() {
      this.$nextTick(() => {
        // this.getDataItem();
        let timeData = this.configForm.getFieldsValue();
        if(!timeData.timeForm) {
          timeData.starTime = moment().startOf('month').format('YYYY-MM-DD');
          timeData.endTime = moment().startOf('day').format('YYYY-MM-DD');
          this.configForm.setFieldsValue({
            timeForm: moment()
          })
          delete timeData.timeForm
        } else {
          timeData.starTime = moment(timeData.timeForm).month(1).format("YYYY-MM-DD");
          timeData.endTime = moment(timeData.timeForm).month(1).format("YYYY-MM-DD");
          delete timeData.timeForm
        }
      });
    },
    methods:{
    	getQuery() {
          let query = this.configForm.getFieldsValue();
          if(!query.timeForm) {
            query.startTime = moment().startOf('month').format('YYYY-MM-DD');
            query.endTime = moment().startOf('day').format('YYYY-MM-DD');
            this.configForm.setFieldsValue({
              timeForm: moment()
            })
            delete query.timeForm;
          } else {
            let time = this.handleMonth(query.timeForm);
            query.starTime = time.startDate;
            query.endTime = time.endDate;
            delete query.timeForm
          }
          return query
        },
        // 月份转成月初和月末日期
        handleMonth(e) {
          /**
           * 利用format直接转为指定格式 比如YYYY-MM-DD、YYYY/MM/DD,
           * 最后两位我直接写成01,就转化为当月1号
           */
          let startDate = e.format('YYYY-MM-01')
          /**
           * 最后一天,有四种情况,有点难办,
           * 利用获取到月份转化成新的时间,MonthPicker和new Date 获取到时间格式略有不同
           */
          let endDate = new Date(e);
          /**
           * getMonth()获取当前月份,返回值是0-11,
           */
          let month = endDate.getMonth();
          /**
           * getFullYear()获取当前年份,++month就是下个月,1代表1号,nextMonthFirstDay就是下个月1号了
           */
          let nextMonthFirstDay = new Date(endDate.getFullYear(), ++month, 1);
          /**
           * 下个月1号减去1天(1000毫秒*1分钟60秒*1小时60分钟*1天24小时)
           * 生成这个月最后一天
           */
          endDate = new Date(nextMonthFirstDay - 1000 * 60 * 60 * 24)
          /**
           * 将生成的当月最后一天转化为指定格式(YYYY-MM-DD)
           */
          endDate = `${endDate.getFullYear()}-${endDate.getMonth() + 1 < 10 ? '0' + (endDate.getMonth() + 1) : endDate.getMonth() + 1}-${endDate.getDate()}`
          return {
            startDate,
            endDate
          }
        },
    }
    
    5、月份转成月初和月末日期的方法,详情在 https://blog.csdn.net/weixin_43915401/article/details/105198949
    6、公用禁选未来日期和重置方法
    // 禁止日期
    disabledDate(current) {
      // 不可选过去时间
      // return current < moment().add(-1, 'd');
      // 不可选未来时间
      return current && current > moment().add(0, "d");
    },
    // 重置筛选条件
    resetConfig() {
      this.configForm.resetFields();
      this.configForm.setFieldsValue({
        timeForm: moment()
      })
    }
    

    谁说站在光里的才算英雄!

    展开全文
  • 本文实例为大家分享了vue-week-picker实现按周切换的日历的具体代码,供大家参考,具体内容如下 vue-week-picker 安装 npm install vue-week-picker --save-dev DEMO 原生:线上DEMO 与element-ui结合使用:线上...
  • } } moment.js moment常用方法: moment().endOf('day') // 今天的23:59:59.999 moment().endOf('year') // 今年的 12 月 31 日 23:59:59.999,还可以填month,week,hour等 moment().add(1, 'months') // 当前月份加...
    // 限制日期不可选
    disabledDate(current) {
    	// Can not select days before today and today
    	// 只能选择当前日期的两个月范围内
    	// return current && (current > moment().endOf('day') || current <  moment().subtract(2, 'months'));
    
    	// 只能选择当前日期的前后一个月范围
    	// return current && (current >  moment().add(1, 'months') || current <  moment().subtract(1, 'months'));
    	// return current && current < moment().endOf('day') //当天之前的不可选,包括当天
    	// return current && current < moment().subtract(1, 'day') //当天之前的不可选,不包括当天
    	// return current > moment() // 大于当前日期不能选
    	// return current < moment().subtract(1, 'days') // 小于当前日期不能选
    	return current < moment().subtract(7, 'days') || current > moment().add(7, 'd') // 只能选前7后7
    },
    
    // 限制时间不可选
    disabledDateTime() {
      return {
    	disabledHours: () => this.range(0, 24).splice(4, 20),
    	disabledMinutes: () => this.range(30, 60),
    	disabledSeconds: () => [55, 56],
      }
    },
    
    // 复杂版
    disabledDateTime = (dates,partial) => {
    	let hours = moment().hours();//0~23
    	let minutes = moment().minutes();//0~59
    	let seconds = moment().seconds();//0~59
    	//当日只能选择当前时间之后的时间点
    	if (dates&&moment(dates[1]).date() === moment().date()&&partial=='end') {
    	  return {
    		disabledHours: () => this.range(hours+1,23),
    		disabledMinutes: () => this.range(minutes+1,59),
    		disabledSeconds: () => this.range(seconds+1,59),
    	  };
    	}
    }

    moment.js 

    moment常用方法:
    moment().endOf('day') // 今天的23:59:59.999
    moment().endOf('year') // 今年的 12 月 31 日 23:59:59.999,还可以填month,week,hour等
    
    moment().add(1, 'months') // 当前月份加一月,如今天2021-05-25,得到就是2021-06-25
    moment().add(1, 'year') // 当前年加一年,如今天2021-05-25,得到就是2022-05-25
    moment().subtract(1, 'months') // 当前月份减一月,如今天2021-05-25,得到就是2021-04-25
    moment().subtract(1, 'year') // 当前年减一年,如今天2021-05-25,得到就是2020-05-25
    
    var a = moment('2021-05-18');
    var b = moment('2020-04-16');
    a.diff(b, 'years') // 1,b-a的年份
    a.diff(b, 'days') // 2,b-a的日期
    
    moment().date() // 25今天的日期
    moment().day() // 2 今天是星期几
    moment().year() // 2021 今年的年份
    moment().year(2022) // 2022-05-25 设置年份为2022
    

    案例 

    current < moment().subtract(7, 'days') || current > moment().add(7, 'd') // 只能选前7后7

    current < moment().subtract(1, 'days') // 小于当前日期不能选

    current > moment() // 大于当前日期不能选

    current && current < moment().subtract(1, 'day') //当天之前的不可选,不包括当天

     

    current && current < moment().endOf('day') //当天之前的不可选,包括当天

    展开全文
  • 解决Element中el-date-picker组件不回填问题 1.问题描述 当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求,比如: 新建一个活动,需要定义活动的时间范围; 因此我们在新建活动的操作过程中需要选择一...

    解决Element中el-date-picker组件不回填问题

    1.问题描述

    当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求,比如:
    新建一个活动,需要定义活动的时间范围;
    因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交,新建完成;
    网页上出现了新建好的活动,其他人想查看详细信息,打开页面,发现时间区间并没有实现回填!
    在这里插入图片描述

    2.问题分析

    时间信息没有回填,首先要检查,后台数据返回情况以及页面上字段信息是否有差异等细节;
    如果没有以上的情况,那就是我碰到的这种情况了,
    后端数据返回没有差异,而且页面字段也没有错,其他的信息也正常回填,唯独时间不回填,同时也伴随一次回填后续不回填等诸多情况。总结来说就是:页面与数据不同步!

    3.解决办法

    打印一下就能知道el-date-picker区间时间组件的数据其实是Array
    在这里插入图片描述
    所以,我们一般从后台拿到数据后进行回填操作如下:

    getDetails (obj){
    	// form.daterange是el-date-picker组件v-model的变量
    	this.form.daterange[0] = obj.startTime;
    	this.form.daterange[1] = obj.endTime;
    }
    

    然而,页面上经常不显示,其实我们这样做也是没问题的,这是element UI自身存在的bug吧,不光日期选择组件有这个问题,有时候下拉框也会偶尔出现此类现象,但是我们可以稍稍修改一下就没问题了,如下:

    getData (obj) {
    	this.form.daterange = [obj.startTime, obj.endTime]
    }
    

    这是最简单的实现了,还有其他的方法也是可以,只要能实现我们的需求可以尽量尝试一些其他方式,在此就不一一列举了。

    展开全文
  • 1.最近做项目用的element-ui组件的 el-date-picker 组件 发现传给后端的时间格式不对 是这个格式:Tue Mar 02 2021 00:00:00 GMT+0800 (中国标准时间) ,而后端需要的是这个格式:2021-3-2 然后我就看我之前用...
  • format: 显示在输入框中的格式(默认为yyyy-MM-dd HH:mm:ss) value-format: ...el-date-picker v-model="searchParams.dateChar" @change="dateChange" :clearable="false" type="datetimerange
  • :picker-options = " expireTimeOption " placeholder = " 选择日期 " value-format = " yyyy-MM-dd " format = " yyyy-MM-dd " > el-date-picker > el-form-item > el-form > div > ...
  • <div> <label class="label-div"> <span>开始时间</span> </label> <el-date-picker @change="getSTime" type="datetime" class="inp" v-model="for...
  • 项目中遇到了选择日期获取当前日期一周的周一和周日的日期,如下: 项目使用的是 ant design,所以第一时间想到了 DatePicker 中的 WeekPicker 组件,查询文档得到 WeekPicker组件中的属性和方法如下: ...
  • 解决element时间选择器el-date-picker赋值无效解决方式 value-format设定格式是 YYYY/M/D ,那么月份和日期分别是1-12、1-31 <el-date-picker v-model="operateDate" type="daterange" range-separator="To" ...
  • 先对组件进行渲染 <el-date-picker ... :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="getTimeList
  • el-date-picker v-model="datevalue" type="datetimerange" value-format="yyyy-NM-dd hh" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :disabled="isDisabled"> <
  • 项目要求:选择日期只能选择本月内的日期,其余年份禁止选择。 <el-date-picker v-model="scope.row.supplyDate" class="widthinput" type="date" ... :picker-options="pickerdate" >
  • 需求:只能选择今天之后的提起(不包括今天),点击本周、本月的时候不包括当天,也就是今天,默认展示前7天,接口...el-date-picker @change="handleDateChange" v-model="form.date" type="daterange" clas...
  • el-date-picker :picker-options="{ firstDayOfWeek: 1}" v-model="StartWeek" type="week" format="yyyy第WW周" placeholder="选择周范围"></el-date-picker> vue-cli 利用moment.js转化时间格式为YYYY-...
  • elementUI官方案例:http://element.eleme.io/#/zh-CN/component/date-picker (1)效果图: (2)安装和引入 npm i ele...
  • a-date-picker @change="getSwitchData" :disabled-date="disabledDate" format="YYYY-MM-DD" :showToday="false" v-model="schedulerForm.schedule_createDate" /> <a-time-picker :disabledHours=...
  • : '0' + d.getDate() var resDate = Y + '-' + M + '-' + D //下面是获取周 //因为fommat格式解析问题所以另下面的用于解析显示 var weekDay = ["'S'UN", "'M'ON", "TUE", "WE'D'", "T'H'U", "FRI", "'S''A''T'"]...
  • 清空Ant Design Vue(antd vue)日期选择器

    千次阅读 2020-09-23 18:49:15
    1、绑定v-model <a-date-picker v-model="timeValue...a-week-picker v-model="timeValue"/> <a-range-picker v-model="times"/> 2、data中定义 data(){ return { timeValue:undefined, times:[]
  • antd RangePicker组件设置默认值

    千次阅读 2020-08-26 10:53:28
    } // 当直接选择rangePicker的时候直接修改开始结束日期就完了 const onChange = (dates, dateStrings) =>{ setDateObj({ startDate: dateStrings[0].replace(/-/g, "/"), endDate: dateStrings[1].replace(/-/g, ...
  • 1、前后一天 <div class="time-box"> <button class="time-item" @click="beforeDay(true)" :style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'" :disabled="disnone ?...a-range-picke
  • '' : 'disabled-color', 'picker-icon picker-icon-you']" class="" :hover-stay-time="100" hover-class="picker-icon-active" @click="canNextMonth ? onSetMonth('+1') : null" >view> [canNextYear ? '' : '...
  • 1、 2、在使用日期选择框的时候,当我们没有进行初始化,并格式化日期时,会出现以下情况 3、解决方法: 在state初始化时给予日期值为undefined 在日期选择框中进行判断 ... style={{ width: '110px' }} ...
  • 这几天做vue项目,想改变element底层样式来完善页面风格,遇到了不少问题,接下来就说说这个日期组件怎么修改样式,这是原始的 ....el-date-picker.has-sidebar.has-time { background: #0a5857d6; color: #fff.
  • * get the end day of given week no of a year. * @param year * @param weekNo * @return */ public String getEndDayOfWeekNo(int year,int weekNo){ Calendar cal = getCalendarFormYear(year); ...
  • span { background: #00754a; border-radius: 2px; } } &:hover td { &.week div { @include week; } &:nth-of-type(2) div { margin-left: 5px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,264
精华内容 505
关键字:

a-week-picker