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

2024-09-03 19:28

本文主要是介绍前端DatePicker组件设置默认日期并限制可选日期范围,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言 

       在前端 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-pickerv-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 * 1000const 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后做判断,如果月份为个位数需在前面补0let beginMonth = beginDate.getMonth() + 1 > 9 ? beginDate.getMonth() + 1 : '0' + (beginDate.getMonth() + 1)// getDate获取的号数从1开始,1号则为1,31号则为31,故不需要加1做判断,如果号数为个位数同样需在前面补0let 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 + '-' + currentDayreturn [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 参数传给后端就行了。

这篇关于前端DatePicker组件设置默认日期并限制可选日期范围的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

如何Python使用设置word的页边距

《如何Python使用设置word的页边距》在编写或处理Word文档的过程中,页边距是一个不可忽视的排版要素,本文将介绍如何使用Python设置Word文档中各个节的页边距,需要的可以参考下... 目录操作步骤代码示例页边距单位说明应用场景与高级用China编程途小结在编写或处理Word文档的过程中,页边距是一个

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

Nginx 413修改上传文件大小限制的方法详解

《Nginx413修改上传文件大小限制的方法详解》在使用Nginx作为Web服务器时,有时会遇到客户端尝试上传大文件时返回​​413RequestEntityTooLarge​​... 目录1. 理解 ​​413 Request Entity Too Large​​ 错误2. 修改 Nginx 配置2.1

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》:本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理(开发环境推荐)2. 后端全局配置 CORS(生产环境推荐)3. 后端注解配置(按接口

Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

《Vue2项目中配置TailwindCSS和FontAwesome的最佳实践举例》:本文主要介绍Vue2项目中配置TailwindCSS和FontAwesome的最... 目录vue 2 项目中配置 Tailwind css 和 Font Awesome 的最佳实践一、Tailwind CSS 配置1. 安

Python日期和时间完全指南与实战

《Python日期和时间完全指南与实战》在软件开发领域,‌日期时间处理‌是贯穿系统设计全生命周期的重要基础能力,本文将深入解析Python日期时间的‌七大核心模块‌,通过‌企业级代码案例‌揭示最佳实践... 目录一、背景与核心价值二、核心模块详解与实战2.1 datetime模块四剑客2.2 时区处理黄金法

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2