时间格式转换 - 最好用的前端组件moment

最近一个新的项目，因需求日期格式回显用户可设置，经过同行老司机指引发现Moment.js这一强大助力，感觉很好用！

1. 安装moment组件，也可以直接引入相关js代码

npm i moment -S

2. 使用

/** 
 * @param {String} date 需要转化的时间值，要求与ISO 8601格式匹配(不传入，默认使用当前时间);
 * @param {String} rule 需要转换的时间格式
*/  
moment(date).format(rule)

ISO 8601格式

时间格式规则如下（更多）：

月	M	1 2 ... 11 12
	Mo	1月2日〜11日12日
	MM	01 02 ... 11 12
	MMM	1月2日... 11月11月
	MMMM	1月2月... 11月12月
天	D	1 2 ... 30 31
	Do	1月2日... 30日31日
	DD	01 02 ... 30 31
	DDD	1 2 ... 364 365
	DDDD	001 002 ... 364 365
周几	d	0 1 ... 5 6
	ddd	星期一，星期二...
	dddd	周一...周五周五
年	YY	70 71 ... 29 30
	YYYY	1970 1971 ... 2029 2030
	gg	70 71 ... 29 30
	gggg	1970 1971 ... 2029 2030
上午/下午	A	AM PM
	a	am pm
小时	H	0 1 ... 22 23
	HH	00 01 ... 22 23
	h	1 2 ... 11 12
	hh	01 02 ... 11 12
分钟	m	0 1 ... 58 59
	mm	00 01 ... 58 59
秒	s	0 1 ... 58 59
	ss	00 01 ... 58 59
Unix 时间戳	X	1360013296
Unix 毫秒时间戳	x	1360013296123

 

另外moment.js还提供了一套本地化格式如下：

标准时间精确至分钟	LT	8:30 PM
标准时间精确至秒	LTS	8:30:25 PM
年月日（月与日补0）	L	09/04/1986
年月日（月与日不补0）	l	9/4/1986
月日年（月为英文）	LL	September 4,1986
	ll	Sep 4,1986
月日年标准时间精确至秒（月为英文）	LLL	September 4,1986 8:30 PM
	lll	Sep 4,1986 8:30 PM
周月日年标准时间精确至秒（周，月为英文）	LLLL	Thursday, September 4 1986 8:30 PM
	llll	Thu, Sep 4 1986 8:30 PM

 

3. vue使用案例

html：

<template>
    <div id="test-ma">
        <div class="left">
            <el-select 
                v-model="rule" 
                placeholder="请选择"
                @change="dateChange">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="rigth">
            <p>{{new Date()}}</p>
            <p>{{show}}</p>
        </div>
    </div>
</template>

 

javascript:

<script>
import moment from 'moment';
export default {
    data(){
        return{
            date:new Date(),
            rule:'',
            show:'',
            options:[
                {
                    label:'LT',
                    value:'LT'
                },{
                    label:'LTS',
                    value:'LTS'
                },{
                    label:'L',
                    value:'L'
                },{
                    label:'l',
                    value:'l'
                },{
                    label:'LL',
                    value:'LL'
                },{
                    label:'ll',
                    value:'ll'
                },{
                    label:'LLL',
                    value:'LLL'
                },{
                    label:'lll',
                    value:'lll'
                },{
                    label:'LLLL',
                    value:'LLLL'
                },{
                    label:'llll',
                    value:'llll'
                },{
                    label:'年-月-日',
                    value:'YYYY-MM-DD'
                },{
                    label:'日-月-年',
                    value:'DD-MM-YYYY'
                },{
                    label:'月-日-年',
                    value:'MM-DD-YYYY'
                },{
                    label:'年/月/日',
                    value:'YYYY/MM/DD'
                },{
                    label:'日/月/年',
                    value:'DD/MM/YYYY'
                },{
                    label:'月/日/年',
                    value:'MM/DD/YYYY'
                }
            ]
        }
    },
    methods:{
        dateChange(){
            this.show = moment(this.date).format(this.rule);
        }
    }
}
</script>

 

效果图：

 

ps：更多关于moment.js的相关内容可参考moment.js官网