问答

循环渲染的时间输入框,时间范围限制?

作者:admin 2021-05-09 我要评论

\#\#\# 循环渲染出的时间框,开始时间和结束时间用的是同一个输入框,怎么判断时间范围 \#\#\# 相关代码 \#\#\# 后台接口返回的数据 \#\#\# 我期待的结果 \#\#\#...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

\#\#\# 循环渲染出的时间框,开始时间和结束时间用的是同一个输入框,怎么判断时间范围

\#\#\# 相关代码
image.png
image.png
image.png

\#\#\# 后台接口返回的数据

image.png

\#\#\# 我期待的结果

image.png

image.png

\#\#\# 现在的结果

image.png

###

可以试下ref绑定field 然后 用this.refs.[field]取值

###

这个是否都是按照开始-结束顺序排列,如果是,那就容易根据index分组获取开始和结束的值,然后做以下的扩展我写的是,开始<=结束,开始<=结束<=当日,可根据实际情况修改(望采纳)

// date-picker部分(下为开始日期,结束日期输入1)
              :picker-options="
                {
                  disabledDate: (time) =>
                    disabledDate(time, beginTime, endTime, 0),
                }
              "
              
// 函数部分,
    /**
     * 获取disabledDate
     * @param {date} time 时间参数
     * @param {string} beginTime 开始日期的值
     * @param {string} endTime 结束日期的值
     * @param {int} type 0为开始,1为结束
     */
    disabledDate(time, beginTime, endTime, type) {
      // 结束日期
      if (type) {
        return (
          time.getTime() < new Date(beginTime).getTime() - 28800000 ||
          time.getTime() > new Date().getTime()
        );
      } else {
        if (endTime) {
          return time.getTime() > new Date(endTime).getTime();
        }
        return time.getTime() > new Date().getTime();
      }
    }

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • app内的web页面,img路径对,但是不显

    app内的web页面,img路径对,但是不显

  • 如何做下载功能?

    如何做下载功能?

  • 复杂正则表达式,实现思路

    复杂正则表达式,实现思路

  • vue一段简单的代码出现奇怪的问题?

    vue一段简单的代码出现奇怪的问题?

腾讯云代理商
海外云服务器