DatePicker周时间选择器遇到的问题

element-ui的周选择器中type为week的时使用value-format无效

• moment(this.week)代表对this.week进行格式化。
• .format(“WW”)代表格式化成哪种形式
• moment官方文档 http://momentjs.cn/docs/#/displaying/

问题描述

• 在element-ui的日期选择器datepicker里边，当type=week的时候，我们可以看到返回值。但是它返回给输出台的值却是一个中国标准时间：

//控制台输出显示为
Tue May 07 2019 00:00:00 GMT+0800 (中国标准时间)

• 后端需要的值仅仅是那个第几周，这个时候发现element-ui有一个value-format属性。
• 但是奈何这个属性对type=week的时候不起作用。网上大家是这样解释的：

这个是bug,当type为week,不能使用value-format这个参数,否则会报错。解决方法:在需要使用周的时间时,使用moment.js单独将时间进行”YYYY年 WW周”格式化

moment.js的安装和全局引用

 npm install moment --save

<template>
    <div>
        <el-date-picker
            v-model="week"
            type="week"
            format="yyyy 第 WW 周"
            @change="getWeek"
            placeholder="选择周">
        </el-date-picker>
        <el-date-picker
            v-model="month"
            type="month"
            @change="getMonth"
            placeholder="选择月">
        </el-date-picker>
    </div>
</template>
<script>
    import moment from 'moment'
     export default {
            data(){
                return{
                    week:'',
                    month:'',
                }
            },
            methods:{
                getWeek(val){
                   //注意，当返回值是中国标准时间的格式时使用 moment.js一定要加上.utcOffset(480)，用来转换时区
                   this.queryItem.week = moment(this.week).utcOffset(480).format("WW")
                },
                getMonth(){
                    var year = moment(this.month).utcOffset(480).format("YYYY")
                    this.queryItem.month = moment(this.month).utcOffset(480).format("MM")
                },
            }
        }
</script>