html5 input type="datetime-local"的值与时间戳互相转换

  我们使用JavaScript或jQuery获取到html5的input type=”datetime-local”的值乍一看有些怪异,例:2017-12-07T12:12,里面带了个字符T(Time),很多朋友都会感叹:这并不是我想要的呀!我要的值应该是这样的:2017-12-07 12:12:00 或者是这样的:1512619920000
  下面,博主将介绍两种方法,将日期格式转换成时间戳:

1
2
3
<!-- HTML代码 -->
<input id="datetimeLocal" type="datetime-local" >
<button id="btnPrintTiemStamp" type="button">打印</button>

日期转换成时间戳

方法一

  去掉字符T,并末尾加上秒数,最后转换成时间戳。流程:2017-12-07T12:12 2017-12-07 12:12:00 1512619920000。

1
2
3
4
5
6
7
// JavaScript代码
// 方法一:
let datetimeLocalVal = document.querySelector('#datetimeLocal').value; // 2017-12-07T12:12
let datetimeLocalVal2 = datetimeLocalVal.replace('T', ' ') + ':00'; // 2017-12-07 12:12:00
// 日期字符串 转换成 时间戳
let timeStamp = new Date(Date.parse(datetimeLocalVal2.replace(/-/g, '/'))).getTime();
console.log('timeStamp: ' + timeStamp); // 1512619920000


方法二

  后来,博主发现datetime-local的值,可以直接转换成时间戳。流程:2017-12-07T12:12 1512619920000。

1
2
3
4
5
// JavaScript代码
// 方法二:
let datetimeLocalVal = document.querySelector('#datetimeLocal').value; // 2017-12-07T12:12
let timeStamp = new Date(datetimeLocalVal).getTime();
console.log('当前datetime-local对应的时间戳:' + timeStamp); // 1512619920000


时间戳转换成标准日期

  将时间戳转换成标准日期格式,例如:yyyy-MM-dd HH:mm:ss 。

1
2
3
4
5
6
// JavaScript代码
// 将时间戳转换成标准日期格式 yyyy-MM-dd HH:mm:ss,例如:1512619920000 → 2017/12/7 12:12:00
let formatterData1 = new Date(parseInt(timeStamp)).toLocaleString('chinese', {hour12: false}); // 24小时制
let formatterData2 = new Date(parseInt(timeStamp)).toLocaleString('chinese', {hour12: true}); // 12小时制
console.log(formatterData1); // 2017/12/7 12:12:00(24小时制)
console.log(formatterData2); // 2017/12/7 下午12:12:00(12小时制)

datetime-local demo picture

-------- The End --------
坚持原创技术分享,您的支持将鼓励我继续创作!
0%