<a_range-picker>组件选择时间段的使用

5 篇文章 0 订阅
4 篇文章 0 订阅

仅供学习,不可转载

研究了好长时间终于把选择时间段存到数据库和从数据库里面拿出来做到回显给弄明白了,在这里做一个非常详细的笔记,从前端的vue到后端整个的实现过程。

效果图

在这里插入图片描述
思路:

1>首先这个组件的使用比较简单,直接拿过来用就可以了,

<a-range-picker
style="width: 100%"
v-decorator="['Times',validatorRules.trainDate]"
format="YYYY-MM-DD"
:placeholder="['开始时间', '结束时间']"
@change="timeChange"/>

同时需要引入moment这个组件

import moment from 'moment'

2>拿到之后取组件里面的时间,这个相对而言也是比较简单,调用@change="timeChange"的方法,直接用moment取开始时间和结束时间就可以了。

timeChange(value,dateString){
this.startTime = dateString[0]
this.endTime = dateString[1]
this.model.Times = [moment(`${this.startTime}`, 'YYYY-MM-DD'), moment(`${this.endTime}`, 'YYYY-MM-DD')]
},

3>拿到时间之后存到数据库里面,这里运用了比较笨的方法,但是比较好理解。一般情况下我们习惯的把数据库里面字段的值的变量类型设置为datetime类型的,但是容易出现字段过长,存不到数据库里面的情况,找了很多的资料也是没有解决。而我在这里面的解决方法就是,首先在model里面设置一个List类型的变量,用来暂时的存储这个时间段

@Excel(name = "***时间", width = 15, format = "yyyy-MM-dd")
@JsonFormat(timezone = "GMT+8",pattern = "yyyy-MM-dd")
@DateTimeFormat(pattern="yyyy-MM-dd")
private List<Date> Times;

然后在数据库里面设置了两个datetime类型的变量,分别来存开始时间和结束时间。
在这里插入图片描述

如果想在前端显示出来两个时间,可以拿到这两个时间之后进行一个转换,转换成字符串类型的,然后存储到另一个String类型的变量,这样在表单显示的时候就是一个时间段,格式可以自己设计。
在这里插入图片描述
4>拿到前端传过来类型为List的变量的数据之后需要做做一些处理。
需要拿到该时间段的index为0,1的时间,然后把对应的时间赋值给相应的变量就可以了,当然这个类型为List的变量没有存到数据库里面,这样就避免了出现字段过长而存不到数据库里面的情况。

5>以上是选择时间段之后存到数据库里面的过程,接下来就是回显的过程。同样的过程,需要从数据库里面查到开始时间和结束时间,然后把这个两个时间add到类型为List的变量里面。然后就是对传到前端数据的处理,处理的时候也是需要用到moment。

this.form.setFieldsValue({'Times': [moment(this.model.Times[0] ),moment(this.model.Times[1])]})

以上的过程就是从选择时间段到列表的显示以及回显的整个过程。

效果图
在这里插入图片描述

如若有相对简单的方法可以评论,一起学习!!!

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

I心暖存人T

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值