前端DatePicker组件设置默认日期并限制可选日期范围

news2024/11/13 9:27:04

前言 

       在前端 element-ui 组件库中有一款组件叫做 DatePicker,是一个灵活选择日期的封装组件,它既能选择单个日期,也能选择一个日期范围(两个日期的组合),后者的应用场景主要有以下两类:1、作为一个搜索条件来查询特定日期范围内的数据;2、作为一个表单用来输入一份协议等文件的生效日期和结束日期并提交到后台。

       经验告诉我们,业务同事也好产品经理也罢基本都会要求前端开发者在进入涉及选择日期的页面时,必须给日期赋个初始值,一来省去了用户手动选择日期范围的时间,二来避免了做查询操作时因为日期为空而进行的全表查询,导致查询速度慢,用户体验感差。鉴于此,本文将讲述在使用DatePicker 组件时,如何一进页面就给日期设置一个默认范围,并且限制用户可以选择查询日期的范围,主要功能如下(全网最全):

1、首次进入页面设置默认查询日期范围为近 7 天(若要默认展示其他天数读者可自行修改代码)

2、日期设置为不可清除、不可编辑,防止用户恶意输入导致全表查询,影响效率

3、限制可选日期范围:以下日期均置灰不可选:

(1)大于当前系统日期(不可能查询未来的数据);

(2)小于选中的第一个日期(即起始日期)的日期(大部分作者都没考虑到这一点,目的是强制使第一次选择的日期为起始日期,第二次选择的日期必须大于起始日期,防止用户先选择结束日期再往前选择起始日期,这会造成用户可以查询任意日期范围的数据);

(3)大于选中的第一个日期(即起始日期)+30 天后的日期

4、选中第一个日期后未选择第二个日期就点击空白处关闭选择器,再次点击日期框选择日期时必须正确展示日期的可选范围(这一点同样很多作者没有考虑到,实现方法就是在 el-date-picker 元素中添加 @blur 事件去刷新日期)

效果图

图 1    进入页面后自动初始化交易日期(近7天的日期范围)

图 2   大于当前日期(2024-09-02)的日期均置灰不可选

图 3   当选择起始日期(2024-05-21)后,大于该日期+30天(2024-06-20)后的日期以及小于起始日期(2024-05-21)的日期均置灰不可选

完整代码

<template>
    <div>
        <p>股票交易记录总览</p>
        <el-form ref="searchFormRef" :model="searchForm" label-width="80px">
            <el-form-item prop="businessNo" label="交易编号:">
                <el-input v-model="searchForm.businessNo"></el-input>
            </el-form-item>
            <el-form-item prop="brokerName" label="交易券商:">
                <el-input v-model="searchForm.brokerName"></el-input>
            </el-form-item>
            <el-form-item label="交易日期:">
                <el-date-picker
                    v-model="tradeDate"
                    type="daterange"
                    :editable="false"
                    :clearable="false"
                    start-placeholder="Start Date"
                    end-placeholder="End Date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerDisabled"
                    @blur="refreshDate"
                ></el-date-picker>
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
        </span>
    </div>
</template>

<script>
import { DatePicker } from 'element-ui'
export default {
    components: { DatePicker },
    data() {
        return {
            tradeDate: '', // 交易日期,格式:['2024-08-26','2024-09-02']
            choiceDate: '', // 选择的第一个日期,即起始日期,格式为时间戳
            searchForm: {
                businessNo: '',
                brokerName: '',
                startDate: '', // 起始日期,格式:['2024-08-26']
                endDate: '', // 结束日期,格式:['2024-09-02']
            },
            pickerDisabled: {
                // 选中日期时触发的方法
                onPick: ({ maxDate, minDate }) => {
                    this.choiceDate = minDate.getTime()
                    // 当选择终止日期后将选择日期置空,防止重新输入日期时无法选择
                    if (maxDate) {
                        this.choiceDate = ''
                    }
                },
                // 筛选出置灰不可选的日期
                disabledDate: (time) => {
                    const now = new Date().getTime() // 当前日期
                    if (this.choiceDate) {
                        // 限制查询的时间范围最多是一个月(30天来算),乘以1000是时间戳与秒的转换积数
                        const timeRange = 30 * 24 * 3600 * 1000
                        const maxTime = this.choiceDate + timeRange
                        // 对大于当前日期或者大于(选择的起始日期+30天)或者小于选择的起始日期的日期置为灰不可选
                        // 注:小于选择的起始日期的日期也置为灰的原因是强制使第一次选择的日期为起始日期,第二次选择的日期必须大于起始日期,防止用户先选择结束日期再往前选择起始日期,这会造成用户可以查询任意日期范围的数据
                        return (
                            time.getTime() > now || time.getTime() > maxTime || time.getTime() < this.choiceDate
                        )
                    } else {
                        // 如果还未选择起始日期,则只将大于当前日期的日期置为灰
                        return time.getTime() > now
                    }
                },
            },
        }
    },
    mounted() {
        // 初始化交易日期,格式['2024-08-23','2024-08-30']
        this.tradeDate = this.initTradeDate()
        // 首次进入页面自动做一次查询操作
        this.search()
    },
    methods: {
        // 刷新日期,避免输入单个日期就关闭选择器然后再重新打开选择器时日期置灰出现错误的问题
        refreshDate() {
            if (this.choiceDate) {
                // 如果choiceDate有值则表明只选择了单个日期,此时需要初始化日期并将choiceDate置空
                this.tradeDate = this.initTradeDate()
                this.choiceDate = ''
            }
        },
        initTradeDate() {
            let currentDate = new Date() // 当前日期
            let beginDate = new Date(currentDate.getTime() - 7 * 24 * 3600 * 1000) // 7天前的日期
            // getMonth获取的月份从0开始,1月则为0,12月则为11,故需要加1后做判断,如果月份为个位数需在前面补0
            let beginMonth = beginDate.getMonth() + 1 > 9 ? beginDate.getMonth() + 1 : '0' + (beginDate.getMonth() + 1)
            // getDate获取的号数从1开始,1号则为1,31号则为31,故不需要加1做判断,如果号数为个位数同样需在前面补0
            let beginDay = beginDate.getDate() > 9 ? beginDate.getDate() : '0' + beginDate.getDate()
            // 日期格式转换,Date类型转换为字符串String类型('2024-08-26')
            beginDate = beginDate.getFullYear() + '-' + beginMonth + '-' + beginDay
            // 对当前日期做同样处理
            let currentMonth = currentDate.getMonth() + 1 > 9 ? currentDate.getMonth() + 1 : '0' + (currentDate.getMonth() + 1)
            let currentDay = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate()
            currentDate = currentDate.getFullYear() + '-' + currentMonth + '-' + currentDay
            return [beginDate, currentDate]
        },
        resetForm() {
            // 将searchForm对象里的属性值重置为空
            this.$refs['searchFormRef'].resetFields()
            // 交易日期tradeDate不是searchForm对象中的属性,所以需要单独重置
            this.tradeDate = this.initTradeDate()
        },
        search() {
            // 查询前先将交易日期数组拆分为起始日期和结束日期两个变量再送给后台解析
            this.searchForm.startDate = this.tradeDate[0]
            this.searchForm.endDate = this.tradeDate[1]
            this.$nextTick(() => {
                axios({
                    method: 'post',
                    url: '/stockInfo/getList',
                    params: this.searchForm,
                })
                    .then(function (response) {
                        // 处理响应数据 
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            })
        },
    },
}
</script>

分析解读

       上述每一步代码做的事都用详尽的注释标注出来了,没有冗余功能的代码,使用代码过程中需注意以下几点:

1、el-date-picker 元素中的 :editable="false" 和 :clearable="false" 两个属性一定要设为 false,避免用户任意输入;

2、el-date-picker 元素中的 @blur 事件需要添加一下,避免输入一个日期就关闭选择框再次打开选择框时发现可选日期范围不对的情况发生;

3、使用日期方法 getMonth 进行日期类型转换时一定要记得 +1,月份 1 月 - 12 月对应的是数字 0-11,而号数(日)则不需要;

4、search() 方法中有以下赋值操作 this.searchForm.startDate = this.tradeDate[0]、 this.searchForm.endDate = this.tradeDate[1],因为后台接口一般都是用两个参数来接收起始查询日期和结束查询日期,故本文将查询日期数组拆分成两个变量后再调后台接口,如果后端开发者会在后端程序中自己处理这个日期数组,那我们就可以将这两行代码删掉,直接将 this.tradeDate 参数传给后端就行了。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

妙用市场情绪找出大盘买卖点,逆向交易5年3倍|邢不行

这是邢不行第 118 期量化小讲堂的分享 作者 | 邢不行、密斯锌硒 前言&#xff1a;有这么一个交易品种&#xff0c;它时而是身披圣光的天使&#xff0c;让人一夜间财富暴涨&#xff0c;时而又化身诱人疯狂的恶魔&#xff0c;让人一息间血本无归&#xff0c;我们似乎很了解它&a…

基于plc的变压器冷却系统设计(论文+源码)

1总体方案设计 通过需求分析&#xff0c;本设计基于PLC的变压器冷却系统的整体结构如图2.1所示&#xff0c;系统采用S7-200 PLC为控制器&#xff0c;其结合温度传感器、电压电流传感器、主风机、备用风机等构成整个系统&#xff0c;具有手动和自动两种模式&#xff0c;在手动模…

C++——入门基础(下)

目录 一、引用 &#xff08;1&#xff09;引用的概念和定义 &#xff08;2&#xff09;引用的特性 &#xff08;3&#xff09;引用的使用 &#xff08;4&#xff09;const引用 &#xff08;5&#xff09;指针和引用的关系 二、inline 三、nullptr 四、写在最后 一、引用…

4.1 数据分析-excel 基本操作

第四节&#xff1a;数据分析-excel 基本操作 课程目标 学会excel 基本操作 课程内容 数据伪造 产生一份招聘数据 import pandas as pd from faker import Faker import random import numpy as np# 创建一个Faker实例&#xff0c;用于生成假数据&#xff0c;指定中文本地…

【Steam游戏星露谷物语添加Mod步骤】

Steam游戏星露谷物语添加Mod步骤 星露谷物语添加拖拉机模组一、安装SMAPI二、正式开始添加MOD 星露谷物语添加拖拉机模组 一、安装SMAPI 星露谷物语添加拖拉机mod为例&#xff0c;添加其它mod一样的步骤。 首先&#xff0c;打开Steam&#xff0c;打开一次星露谷物语这款游戏&…

echarts遍历区域折线图,单线和多线

// 单线折线图drawonelineCharts(){var echarts require("echarts");var lineCharts document.getElementsByClassName(lineChart); // 对应地使用ByClassNamethis.linecolor[#01FFD4,#1C70DD,#01FFD4,#1C70DD,#01FFD4,#1C70DD]for(var i 0;i < lineCharts.len…

2024.9.2

还没写完 #include <iostream> #include <cstring> using namespace std;class myString { private:char *str; //字符串int size; //实际字符长度int len; //字符串容量 public:myString():size(10) //无参构造函数{len siz…

大模型入门 ch01:大模型概述

本文是github上的大模型教程LLMs-from-scratch的学习笔记&#xff0c;教程地址&#xff1a;教程链接 STAGE 1&#xff1a; BUILDING 1. 数据准备与采样 LLM的预测过程&#xff0c;是一个不断预测下一个词&#xff08;准确的说是token&#xff09;的过程&#xff0c;每次根据输…

太狠了:华为的卫星通信能免费使用了

在科技日新月异的今天&#xff0c;手机已不再仅仅是通讯工具&#xff0c;它们正逐步成为我们生活中的全能助手。 而华为&#xff0c;作为科技领域的佼佼者&#xff0c;再次以其创新技术引领了一场卫星通信的革命。 近日&#xff0c;华为正式官宣Pura 70系列首发支持中国移动北…

压缩PDF,介绍这五种压缩方案

压缩PDF&#xff0c;在现代信息社会中&#xff0c;PDF文件已经成为我们日常工作和学习中不可或缺的重要载体。但随着PDF文件内容的增多和复杂化&#xff0c;文件大小的膨胀也成为一个常见问题&#xff0c;给存储、共享和传输带来了不少挑战。今天&#xff0c;我们将详细介绍五种…

美业小程序可以解决哪些行业痛点?美业SaaS收银系统管理系统拓客系统源码

随着移动互联网的快速发展&#xff0c;美业小程序成为了美容美发行业的一大利器&#xff0c;为企业和消费者带来了诸多便利。在当前美业的现状下&#xff0c;美业小程序已经开始解决许多行业痛点&#xff0c;并且在未来将继续发挥重要作用。 ▶美业现状 美业市场规模庞大&…

python-A-B数对

题目描述 给出一串数以及一个数字 C&#xff0c;要求计算出所有 A−BC 的数对的个数&#xff08;不同位置的数字一样的数对算不同的数对&#xff09;。输入 输入共两行。 第一行&#xff0c;两个整数 N,C。 第二行&#xff0c;N 个整数&#xff0c;作为要求处理的那串数。输出 …

review——Linux进程调度与切换

文章目录 目录 前言 1.进程的一些概念 2.进程的优先级 二、进程切换 三、进程调度 总结 前言 在我们的windows电脑上&#xff0c;常常会开启许多不同的软件&#xff0c;我们知道他们会一种和谐的方式存在于我们的电脑上&#xff0c;它们会随着我们的点击而启动&#xff0c;会随…

PMP核心知识点—之项目的整合管理

知识点1&#xff1a;制定项目章程 项目章程是启动过程组的输出。 项目章程主要是&#xff1a;批准项目、给项目经理授权 明确项目与组织战略目标之间的直接联系。 项目章程是由项目发起人编制或者是项目经理和项目发起人共同编制。 项目章程是由项目启动者或者项目发起人发布。…

【unity实战】使用新版输入系统Input System+Rigidbody实现第三人称人物控制器(附项目源码)

最终效果 前言 使用CharacterController实现3d角色控制器&#xff0c;之前已经做过很多了&#xff1a; 【unity小技巧】unity最完美的CharacterController 3d角色控制器&#xff0c;实现移动、跳跃、下蹲、奔跑、上下坡、物理碰撞效果&#xff0c;复制粘贴即用 【unity实战】C…

这些OA办公系统,才是企业高效行政的秘诀

本文将盘点10款OA办公系统&#xff0c;为企业选型提供参考。 大量的文件堆积在办公室&#xff0c;查找困难&#xff0c;浪费时间&#xff1f;文件的借阅和归还流程不规范&#xff0c;文件不知去向&#xff0c;无翼而飞&#xff1f;纸质单据审批周期长、审批过程不透明&#xff…

仕考网:事业单位考试分为哪几种类型?

事业单位招聘考试每年举行一次或两次&#xff0c;全国性的联考通常在每年的5月和10月底至11月初进行&#xff0c;省和市级直属单位的招聘次数则不受限制&#xff0c;各省的具体考试时间由各自安排。 事业单位的考试类型主要分为以下几种&#xff1a;全国事业单位联考、省级事业…

ELK学习笔记(一)——使用K8S部署ElasticSearch8.15.0集群

一、下载镜像 #1、下载官方镜像 docker pull elasticsearch:8.15.0 #2、打新tag docker tag elasticsearch:8.15.0 192.168.9.41:8088/new-erp-common/elasticsearch:8.15.0 #3、推送到私有仓库harbor docker push 192.168.9.41:8088/new-erp-common/elasticsearch:8.15.0二、…

港迪技术IPO上市:专注国产替代,盾构机变频器技术领先市场

武汉港迪技术股份有限公司&#xff08;以下称&#xff1a;“港迪技术”或“公司”&#xff09;是第四批国家级专精特新“小巨人”企业&#xff0c;公司及子公司港迪智能、港迪软件均为高新技术企业。据港迪技术IPO上市招股书&#xff08;注册稿&#xff09;显示&#xff0c;公司…

Java中实现JSON格式的转换(通过实例讲解)

创建项目 在IDEA中新建一个Java项目&#xff0c;在建好后的项目结构中添加一些必要的目录和文件&#xff0c;我最终的项目结构如图所示&#xff1a; 其中&#xff0c; Person和Dog是用于演示的两个类&#xff1b;JSONTest是实现将Person和Dog的实例对象转换成字符串&#xff…