【JavaScript】将<input>的datetime-local的值转为Date型发送到服务器
来源:互联网 发布:摇杆软件 编辑:程序博客网 时间:2024/06/01 17:05
datetime-local的格式
datetime-local的格式为YYYY-MM-DDTHH:mm:ss
,注意日期和时间之间有一个T
,这是ISO 8601
的标准
不过,在Java后端,一般都是用Date
类型接收时间,然后存入数据库。如果直接用Java的LocalDateTime
接收,然后存入数据库,数据库会找不到和LocalDateTime
类型对应的数据库类型
这时候需要将datetime-local
转为Date
类型。一种方式是在后端操作,需要在接收时间参数后进行格式转换,似乎可行。不过实际操作来看,如果用@RequestBody
接收对象类型,那么这种方式不太可行。另一种方式就是在前端发送JSON给服务器之前,将之转为Date
类型
实例
表单
表单中的日期时间控件命名id为startDate
,用于在脚本中初始化该控件的时间,比当前时间多一个小时用于预定时间
也可以用value="YYYY-MM-DDTHH:mm:ss
的格式,初始化日期时间控件
<form id="order"> <table> <tr> <td>服务时间:</td> <td><input id="startDate" type="datetime-local" name="startDate"></td> </tr> <tr> <td>预付款:</td> <td><input name="advancePayment"></td> </tr> <tr> <td>支付方式:</td> <td> <select name="paymentMethod"> <option value="0">在线支付</option> <option value="1">公司转账</option> </select> </td> </tr> <tr> <td> <button type="button" onclick="sendOrder()">添加订单</button> </td> </tr> </table></form>
脚本
脚本中最开始用比当前时间多一个小时的时间初始化日期时间控件,注意日期和时间之间的T
然后当点击按钮时,调用sendOrder()
函数,先将表单中的日期时间控件的datetime-local
的值转为Date
类型。再将表单转为JSON发送到后端
<script> //设置表单中的初始时间,比当前时间多一小时 var now = new Date(); now.setHours(now.getHours() + 1); var str = now.getFullYear() + "-" + fix((now.getMonth() + 1), 2) + "-" + fix(now.getDate(), 2) + "T" + fix(now.getHours(), 2) + ":" + fix(now.getMinutes(), 2); $("#startDate").val(str); //将日期格式化为两位,不足补零 function fix(num, length) { return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num; } //发送订单 function sendOrder() { //将datetime-local转换为Date x = $("#startDate").val(); now.setFullYear(parseInt(x.substring(0, 4))); now.setMonth(parseInt(x.substring(5, 7)) - 1); now.setDate(parseInt(x.substring(8, 10))); now.setHours(parseInt(x.substring(11, 13))); now.setMinutes(parseInt(x.substring(14, 16))); //获取表单数据,并序列化 var formData = $("#order").serializeArray(); //将序列化数据转为对象 var formObject = {}; for (var item in formData) { formObject[formData[item].name] = formData[item].value; } formObject.startDate = now; var formJSON = JSON.stringify(formObject); //发送JSON到服务器 $.ajax({ type: "POST", url: "<%=basePath%>/order/addOrder", contentType: "application/json", //一定要设置这一行,很关键 data: formJSON, datatype: "json", success: function (data) { alert(JSON.stringify(data)); } }); }</script>
阅读全文
2 0
- 【JavaScript】将<input>的datetime-local的值转为Date型发送到服务器
- html5 input month/date/week/time/datetime/datetime-local
- 将DateTime.Now.DayOfWeek的值转为中文星期
- JAVA中如何将以Date型的数据保存到数据库以Datetime型的字段中
- JAVA中如何将以Date型的数据保存到数据库以Datetime型的字段中
- 将服务器获取的<null>转为""
- 通过javascript将input输入框的值复制拷贝到剪贴板clipboard,支持ie,firefox
- json中string类型的datetime格式转换为datetime类型:例string类型"/Date(1242357713797+0800)/" 转为datetime类型"yyyy-MM-dd"
- json中string类型的datetime格式转换为datetime类型:例string类型"/Date(1242357713797+0800)/" 转为datetime类型"yyyy-MM-dd"
- mysql的date,datetime字段
- date,datetime,timestamp 的区别
- date 与datetime的区别
- Date、DateTime、TimeStamp的范围
- date,datetime,timestamp的区别
- 基于chromium24的HTML5特性实现(input type = week date datetime datetimelocal month time)
- 用JavaScript将long型数据转换成date型或datetime型
- Date转为Long的方法
- .net 将yyyyMMDDHHmmss转为datetime
- 可视化设计器的正确打开方式
- Attempt to invoke virtual method 'void android.support.v7.widget.ContentFrameLayout.setId(int)' on a
- 点击率预估算法:FM与FFM
- 如何编写更好的SQL查询
- Java实现AES加密,异常java.security.InvalidKeyException: Illegal key size 的解决
- 【JavaScript】将<input>的datetime-local的值转为Date型发送到服务器
- 【备忘】大数据最火爆技术spark之王家林2016最新高清视频教程
- java 实现地址到经纬度坐标的转化
- Spring Batch (3)(1)
- linux多线程的使用
- scala加载和写入外部xml文件
- warning: accessed via instance reference
- 属性动画
- 软件