element组件库的日期选择器如何限制?

本次项目中涉及到根据日期查找出来的数据进行调整,所以修改的数据必须是查找范围内的数据.需要对调整数据的日期进行限制,效果如下:

首先我们使用了element 组件库的日期选择器,其中灌完介绍, picker-options中函数disabledDate可以设置禁用状态,代码如下:

             <el-date-pickerv-model="formData.dates"type="date"placeholder="选择日期"value-format="yyyy-MM-dd":picker-options="pickerOptions"></el-date-picker>data(){return {pickerOptions: {disabledDate: this.doLimitDate  //调用方法}}}

因为这里根据节假日进行查找,所以能调整的数据也只有国庆节期间的.

方便操作, 后端同事返回了起始时间的数据 , 所以我只需要对日期处理进行限制即可, 在这里的思路是讲起始时间段转为时间戳 , 进行判断即可,在这里有个小问题, 为什么需要格式化日期,是因为后端返回的是字符串,字符串试用getTime()转时间戳是不行的哦.所以这里处理了一下,代码如下:

 methods: {doLimitDate() {//这里new Date()是格式化日期的方法,this.startEndDate是起始时间段let start = new Date(this.startEndDate[0]).getTime() let end = new Date(this.startEndDate[1]).getTime()this.pickerOptions.disabledDate = (time) => {return time.getTime() < start || time.getTime() > end}}
}

所以,只需要把限制的时间范围进行时间戳转换即可了, 快去操作一下试试吧 !

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/285694.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SD-WAN网络的可扩展性解析

SD-WAN组网以其卓越的可扩展性而脱颖而出&#xff0c;为企业提供了一个灵活适应不断扩张和增长需求的网络解决方案。SD-WAN组网通过轻松实现规模调整、拓扑变更以及多种接入方式的切换&#xff0c;确保网络的高效性和可管理性。对于正处于快速发展时期的企业而言&#xff0c;SD…

【二分查找】【z型搜索】LeetCode240:搜索二维矩阵

LeetCoe240搜索矩阵 作者推荐 【贪心算法】【中位贪心】.执行操作使频率分数最大 本文涉及的基础知识点 二分查找算法合集 题目 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。 每列的…

OpenAI 偷偷在训练 GPT-4.5!?

最近看到有人已经套路出 ChatGPT 当前的版本&#xff0c;回答居然是 gpt-4.5-turbo&#xff1a; 实际试验下&#xff0c;用 starflow.tech&#xff0c;切换到小星 4 全能版&#xff08;同等官网最新 GPT-4&#xff09;&#xff0c;复制下面这段话问它&#xff1a; What is the…

Apache RocketMQ 5.0 腾讯云落地实践

Apache RocketMQ 发展历程回顾 RocketMQ 最早诞生于淘宝的在线电商交易场景&#xff0c;经过了历年双十一大促流量洪峰的打磨&#xff0c;2016年捐献给 Apache 社区&#xff0c;成为 Apache 社区的顶级项目&#xff0c;并在国内外电商&#xff0c;金融&#xff0c;互联网等各行…

java继承

1.为什么需要继承 我们编写了两个类,一个是Puppil类(小学生),一个是Graduate(大学生),问题:两个类的属性和方法有很多是相同的,怎么办&#xff1f; 把共有的属性和方法抽离出来: 父类&#xff1a; package com.hspedu.extends01;//父类,是Pupil和Graduate的父类 public cla…

UE5 C++(六)— 枚举UENUM、结构体USTRUCT和补充属性说明符

文章目录 枚举&#xff08;ENUM&#xff09;第一种方式第二种方式 结构体&#xff08;USTRUCT&#xff09;补充属性说明符&#xff08;ExposeOnSoawn&#xff09;结构体创建数据表格 枚举&#xff08;ENUM&#xff09; 第一种方式 定义枚举 UENUM(BlueprintType) namespace …

2023.12.18Linux部署项目

动态查看最新内容 防火墙不能杀毒&#xff0c;只能限制服务器的哪些端口可以被访问 哪些主机可以访问本服务器 防火墙开启之后默认封闭所有端口&#xff0c;自己再用策略声明把哪些端口放开 ksh jdk&#xff1a;二进制包 MySQL&#xff1a;rpm包 Redis&#xff1a;源码…

RTLS 解决现实场景的25种问题

实时定位系统 (RTLS) 可以改变我们理解周围世界的方式。 想想你有多少次停下来寻找某样东西。您可能正在寻找钥匙、电话、鞋子、零食、背包、办公室中的重要文件、停车场中的车辆&#xff0c;或者可能正在寻找街道标志或地标来引导自己。我们大多数人每天都会希望更好地了解我…

7.1组合及其优化(LC77-M)

算法&#xff1a; 第一次取1 2 3 4 取1时&#xff0c;留下234 取2时&#xff0c;留下34 取3时&#xff0c;留下4 取4时&#xff0c;留下null 接着继续取234中的2&#xff0c;与1组合&#xff0c;得到12 取234中的3&#xff0c;与1组合&#xff0c;得到13 取234中的4&#…

ElasticSearch详细搭建以及常见错误high disk watermark [ES系列] - 第497篇

导读 历史文章&#xff08;文章累计490&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六…

PHP使用symfony/process来实现多进程请求url或执行多个php文件

1、什么是symfony/process&#xff1f; Symfony/Process是Symfony框架中的一个组件&#xff0c;用于处理和管理子进程。它提供了一个简单易用的API&#xff0c;可以执行外部命令&#xff0c;并与子进程进行交互。 Symfony/Process可以执行各种操作系统命令&#xff0c;如运行…