首页 > 其他分享 >ant design of vue的a-rang-picker时间控制既不能选今天以后的日期且开始时间跟结束时间之间差不能超过3天

ant design of vue的a-rang-picker时间控制既不能选今天以后的日期且开始时间跟结束时间之间差不能超过3天

时间:2023-04-23 10:22:23浏览次数:49  
标签:picker rang DD selectPriceDate current moment 时间 selectV

在项目中这个问题在困扰我,虽然我知道它是有一个Api是disableDate来控制时间的选择;但是只能够实现开始时间跟结束时间之间差不能超过3天。

效果图

接下来就是代码时间呀

 <a-col>
      <a-form-model-item label="任务时间范围" prop="priceRangeDate">
        <a-range-picker
          :disabled-date="disabledDate"
          v-model="form.priceRangeDate"
          @calendarChange="calendarPriceRangeChange"
          @change="changePriceRangeDate"
        >
          <a-icon slot="suffixIcon" type="calendar" />
        </a-range-picker>
      </a-form-model-item>
    </a-col>

在script里面的data对象写上

form:{priceRangDate},

offsetDays: 86400000 * 2,

selectPriceDate: "",
// 选择完时间 清空限制

    changePriceRangeDate() {

      this.selectPriceDate = "";

    },

    //选择开始时间/结束时间

    calendarPriceRangeChange(date) {

      this.selectPriceDate = date[0];

    },

    //根据选择的开始时间/结束时间,动态渲染要禁用的日期

    disabledDate(current) {

      

      if (this.selectPriceDate) {

        let selectV = moment(this.selectPriceDate, "YYYY-MM-DD").valueOf();

          return (

           (current > moment().endOf('day')||

            current >moment(new Date(selectV + this.offsetDays), "YYYY-MM-DD")) ||

           current < moment(new Date(selectV - this.offsetDays), "YYYY-MM-DD")

          );

      } else {

        return  current && current > moment().endOf('day');

      }

    },

最后希望大家少走弯路,我会不定期更新我的代码记录,感谢你的观看!

标签:picker,rang,DD,selectPriceDate,current,moment,时间,selectV
From: https://www.cnblogs.com/panwudi/p/17345703.html

相关文章

  • Oracle apex社区教程 PLSQL常用时间函数
    摘自OracleAPEX社区www.sqlu.cnOracleAPEX中文社区|OracleAPEX资源|OracleAPEX学习|EBS开发|EBSINTERFACE|OracleEBS开发|Oracle数据库开发|EBSAPI 一,获得时间1.Sysdate当前日期和时间Selectsysdatefromdual;2.Last_day本月最后一天Selectlast_day(sysdate)......
  • nginx访问日志,写一个统计一个时间段内,每一分钟有多少个IP访问的shell脚本怎么写?
    可以使用Shell脚本结合awk命令和sed命令来实现对Nginx访问日志的统计。具体实现如下:#!/bin/bash#访问日志文件路径access_log="/var/log/nginx/access.log"#时间段start_time=$(date-d"yesterday00:00:00""+%d/%b/%Y:%H:%M:%S")end_time=$(date"+%d/%b/%Y:......
  • 理解 Java8 的时间API(一)时区
    理解Java8的时间API:java.time由于Java的时间API:java.util.Date、java.util.Calendar、java.util.TimeZone使用起来非常混乱,因此Java8重新设计了一套时间API,放在java.time.*包下。如果需要熟练使用新的LocalDateTime,LocalDate,LocalTime类,最好是先了解时区的概念。因此本文先......
  • MySQL 时间类型 date、datetime 和 timestamp 的用法与区别
    时间范围datetime和timestamp区别时间范围不一样,TIMESTAMP要小很多,且最大范围为2038-01-1903:14:07.999999,到期也不远了。datetime与时区无关、timestamp与时区有关。对于timestamp,它把客户端插入的时间从当前时区转化为UTC(世界标准时间)进行存储。查询时,将其又转化为客户......
  • Java:LocalDateTime获取今天的开始时间和结束时间
    代码示例LocalDateTimenow=LocalDateTime.now();intyear=now.getYear();intmonth=now.getMonthValue();intday=now.getDayOfMonth();System.out.println(String.format("%d-%d-%d",year,month,day));//2023-4-21LocalDateTimestartTime=Loca......
  • k3s 基础 —— 配置 kubernetes-dashboard 的 token 过期时间
    拉取配置到本地:kubectlgetdeploykubernetes-dashboard-nkubernetes-dashboard-oyaml>dashboard-deploy.yaml增加参数:spec:containers:-args:---auto-generate-certificates---namespace=kubernetes-dashboard---to......
  • 又是浪费时间的一天-ssh的安装之路
     远程办公的运维工程师都知道有这么一个神器:putty,只有390k。别看他小,但他五脏俱全,很是强大。所以,今天特地在复习巩固数据库知识时想用它直接登陆服务器的数据库命令行,而要安全的使用这个工具就必须安装一个加密协议,也就是ssh或telnet,但发现服务器上没有安装ssh和telnet。于是......
  • java中有关于时间格式以及定时器遇到的问题
    https://www.cnblogs.com/SjhCode/p/time.html时间格式这个是通过Calendar做时间滚动 //开始时间yyyy-MM-ddHH:mm:ss@Value("${StartTime}")@JsonFormat(timezone="GMT+8",pattern="yyyy-MM-ddHH:mm:ss")@DateTimeFormat(pattern="yyyy-MM-......
  • js 时间格式化函数
    functiondateFormat(time,fmStr){constweekCN='一二三四五六日'constweekEN=['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']letyear......
  • JAVA获取当前时间的三种方法
    1、java.util.Dateday=newDate();SimpleDateFormatsdf=newSimpleDateFormat(“yyyy-MM-ddHH:mm:ss”);System.out.println(sdf.format(day));通过Date类来获取当前时间,比较常用。需要使用Java.util.Date类,速度一般。2、SimpleDateFormatsdf=newSimpleDateFormat......