场景

前端需要获取24小时制的时间参数并传递到后台存储到数据库。

在数据库中存储的是

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先前端使用ElemetUI的el-time-picker时间范围选择控件。

官方示例代码

<template><el-time-pickeris-rangev-model="value1"range-separator="至"start-placeholder="开始时间"end-placeholder="结束时间"placeholder="选择时间范围"></el-time-picker><el-time-pickeris-rangearrow-controlv-model="value2"range-separator="至"start-placeholder="开始时间"end-placeholder="结束时间"placeholder="选择时间范围"></el-time-picker>
</template><script>export default {data() {return {value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]};}}
</script>

其他属性说明等参见官方文档：

https://element.eleme.cn/#/zh-CN/component/time-picker

首先在页面上添加一个el-time-picker

              <el-time-pickeris-rangeformat="HH:mm"value-format="HH:mm":style="{width: '100%'}"start-placeholder="开始时间"end-placeholder="结束时间"range-separator="至"clearable@change="changesjfw(scope.row)"v-model="bcglXiangXiList.sjfw"></el-time-picker>

这个获取的时间范围绑定的model是一个String的数组，类似下面这种

sjfw: ["07:30", "07:30"],

在将这个控件的值传递给后台时传递的是上面这种String的时间数组，而我们在数据库中

存储的往往是是将这个时间分成两个，一个是开始时间一个是结束时间。

所以我们在请求后台接口时需要将此数组根据逗号取出来两个时间范围。

    bcxiangxi.dkkssj = element.sjfw[0];bcxiangxi.dkjssj = element.sjfw[1];

其中element就是bcglXiangXiList.sjfw传递给方法的时间范围数组，

然后bcxiangxi是在请求后台接口时新建的对象

var bcxiangxi  = {};

作为传递参数用，并且设置其两个属性为开始时间和结束时间并分别取得时间范围。

在后台接受参数时的实体类对应的两个属性

    /** 开始时间 */private String dkkssj;/** 结束时间 */private String dkjssj;

这样就通过post请求获取传递的两个时间范围参数。

在设计数据库时将这两个字段设置为varchar类型的。

这是在新增时将范围数组进行拆分，如果是在编辑时需要对控件进行赋值

            bcxiangxi.sjfw = new Array();bcxiangxi.sjfw[0] = item.dkkssj;bcxiangxi.sjfw[1] = item.dkjssj;

接可以通过这种将连个拼接的形式将后台传递的两个范围字符串拼接成字符串数组，进而赋值给

控件对应的data

ElementUI中使用el-time-picker向SpringBoot传输24小时制时间参数以及数据库中怎样存储相关推荐

oracle时间24小时格式转换,在oracle数据库中查询时间并转为24小时制--------------String转Date类型或者Date转String类型...
1.在Oracle数据库中查询时间的时候,首先就是把日期从date类型的转化为String类型的. 2.将date类型的转成String类型的,直接调用传入date类型的参数,返回String类型的字 ...
mysql date 24小时制_SpringBoor连接mysql数据库取数据库中时间格式是12小时制的时间，如何显示成24小时制...
设置spring配置文件: 1.spring.datasource.url=jdbc:mysql://10.35.105.25:3306/database?characterEncoding=utf- ...
oracle传date参数十二小时,Oracle数据库中 to_date()与24小时制表示法及mm分钟的显示...
一.在使用Oracle的to_date函数来做日期转换时,时候也许会直接的采用"yyyy-MM-dd HH:mm:ss"的格式作为格式进行转换,但是在Oracle中会引起错误:&q ...
解决：Activiti7与SpringBoot整合时，默认生成的activiti数据库中只有17张表，无另外8张历史表
问题 Activiti7与SpringBoot整合时,默认生成的activiti数据库中只有17张表,无另外8张历史表. 原因 Activiti默认关闭了历史表的使用. 解决在连接数据库的appli ...
linux下数据库时间格式,Java编程时间格式与数据库中时间格式转化
关于编程语言中的时间格式和关系型数据中的中时间格式问题的转化一直都是个简单而又不得不权衡的问题,这牵扯到数据库设计和SQL编程和应用程序中时间格式数据的处理的编程,两者总能够交缠在一起. 关于Java ...
java hh24miss_Java编程时间格式与数据库中时间格式转化
关于编程语言中的时间格式和关系型数据中的中时间格式问题的转化一直都是个简单而又不得不权衡的问题,这牵扯到数据库设计和SQL编程和应用程序中时间格式数据的处理的编程,两者总能够交缠在一起. 关于Java ...
时间格式中，hh小写的是12小时制，大写（HH）是24小时制的。
this.timeItem.Caption = DateTime.Now.ToLocalTime().ToString("yyyy-MM-dd hh:mm:ss"); //下午三点 ...
SimpleDateFormat 中的12小时制与24小时制
欲以当前时间作为唯一标识来为生成文件命名,遇到12小时制的问题,由于存在重复的可能,故查找相关内容. 效果展示如图,实际时间为晚间的八点多,上为24小时制,下为12小时制. 重点内容核心即在于为 ...
oracle sql比较时间大小,Oracle数据库中日期时间的操作比较和加减
Oracle数据库中日期时间的操作比较和加减 Oracle关于时间/日期的操作 1.日期时间间隔操作当前时间减去7分钟的时间 select sysdate,sysdate - interval '7 ...

ElementUI中使用el-time-picker向SpringBoot传输24小时制时间参数以及数据库中怎样存储

场景

实现

ElementUI中使用el-time-picker向SpringBoot传输24小时制时间参数以及数据库中怎样存储相关推荐

最新文章

热门文章