日期格式化总结

自己常用的三种格式化日期方式

1.Date原型封装

这是我用的最多也最喜欢的格式化方式，直接附上代码（借鉴的）

Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

调用方法

return new Date(value).Format("yyyy-MM-dd hh:mm")

示例：红框是后台请求返回时间字段，箭头所指即是格式化后渲染效果。


像这样直接传值给形参value就能拿到我们格式化的值。

2.Moment.js

中文网址：http://momentjs.cn/

<script src="./moment.js"></script>
console.log(moment().format('YYYY-MM-DD HH:mm:ss'));  //2020-03-17 23:48:01

这是当前的时间输出的一个例子，多语言，日期格式化看中文网介绍一目了然。

3.手动拼时间串

优点，快速，容易理解，但是兼容性没有Date原型封装的要好。上段示例代码。

var myDate = '2019-09-17T15:35:55+08:00';
function timestampToTime(timestamp) {
    var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
    var h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
    var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
    var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
    return Y + M + D + h + m + s;
}
console.log(timestampToTime(myDate))  //2019-09-17 15:35:55

4.layui时间插件

-layui想必大家都有所耳闻，功能强悍，套用简单粗暴，官网地址：https://www.layui.com/
-这里还是分享下日期时间插件的用法。
-可以引用layui.js,也可只引用日期独立js----laydate.js

<input type="text" class="layui-input" id="test10" placeholder="">
<script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->
<script>
  //日期时间范围
  laydate.render({
    elem: '#test10',
    type: 'datetime',
    range: true
  });
</script>

最经典的一个例子，更多用法可以参考官方文档：https://www.layui.com/demo/laydate.html

博客分享初衷是为了方便自己查阅，同时也希望帮到正在浏览的您！