当前位置: 首页 > news >正文

elementui+ <el-date-picker type=“datetime“/>时间组件的当前时间的180天之内的禁止选择处理

需求1如下:当前时间+180天不可选择,180天之后可以选择,之前的时间都禁止选择

页面代码如下:

  <el-date-picker

            v-model="temp.expire_time"

            :picker-options="pickerOption"

            type="datetime"

            placeholder="选择日期时间"

            format="yyyy-MM-dd  HH:mm:ss "

            value-format="yyyy-MM-dd HH:mm:ss"

          />

pickerOption: {

       // 限制只能选择180天以后的时间

        disabledDate: (time) => {

          return (time.getTime() < Date.now() + 8.64e7 * 180)

        }

      },

需求2如下:默认选择当前时间的180天的时间,所有时间都可以选择

页面代码同需求1一样,不同的是处理默认选择的时间

methods: {

    // 获取当前时间的180天后的时间值

    getThreeTime() {

      var data = new Date()

      var Da = new Date(data.getTime() + 24 * 60 * 60 * 1000 * 180)

      var y = Da.getFullYear()

      var m = Da.getMonth() + 1

      var d = Da.getDate()

      var H = Da.getHours()

      var mm = Da.getMinutes()

      var ss = Da.getSeconds()

      m = m < 10 ? '0' + m : m

      d = d < 10 ? '0' + d : d

      H = H < 10 ? '0' + H : H

      return y + '-' + m + '-' + d + ' ' + H + ':' + mm + ':' + ss

    },

}

 // 授权有效期默认值是180天

编辑的函数中处理如下

      if (row.expire_time === null) {

        // 授权有效期默认值选择是180天之后的

        this.$set(this.temp, 'expire_time', this.getThreeTime());

      } else {

        this.$set(this.temp, 'expire_time', row.expire_time);

      }

以上就是关于年月日时分秒的时间组件的两种需求处理,今天就分享到这里啦!

http://www.lryc.cn/news/263166.html

相关文章:

  • 全网好听的BGM都在这里下载,赶紧收藏好了
  • Spark编程实验一:Spark和Hadoop的安装使用
  • 代理和AOP
  • Solidity-3-类型
  • 【mask转json】文件互转
  • 华清远见嵌入式学习——ARM——作业1
  • 如何在公网环境使用固定域名远程访问内网BUG管理系统协同办公
  • k8s pod网络排查教程
  • Apollo Planning——换道:LANE_CHANGE_DECIDER
  • Python 爬虫之简单的爬虫(三)
  • 为突发事件提供高现势性数据支撑!大势智慧助力中山市2023应急测绘保障演练举行
  • 图片速览 OOD用于零样本 OOD 检测的 CLIPN:教 CLIP 说不
  • a16z:加密行业2024趋势“无缝用户体验”
  • C# WPF上位机开发(属性页面的设计)
  • macOS 安装 oh-my-zsh 后 node 报错 command not found : node
  • AI 绘画 | Stable Diffusion 视频数字人
  • 《代码随想录》--二叉树(一)
  • shell编程-数组与运算符详解(超详细)
  • Vim入门
  • 动态加载库
  • React中渲染html结构---dangerouslySetInnerHTML
  • 计网02-计算机网络参考模型
  • 模块测试:确保软件质量的关键步骤
  • Postman接口测试之Postman常用的快捷键
  • keil自动分配SDRAM空间设置使用
  • TikTok获客怎么做?可以定制一个获客工具!
  • 数据结构(Chapter Two -02)—顺序表基本操作实现
  • SQL语句整理二--Mysql
  • oracle与gbase8s迁移数据类型对照
  • Flink系列之:集合操作