vue 中常见的时间格式转换

项目中后台返回的时间有多种形式,时间戳、ISO标准时间格式等,我们需要转化展示成能看的懂得时间格式

2022-05-27T14:20:27.000000Z 时间格式转换成 2022-05-27 14:20:27

自定义js

   dateFormat(row, column, cellValue, index) {
                console.log(row, column, cellValue, index)
                const daterc = row[column.property]
                if (daterc != null) {
                    var date = new Date(daterc);
                    var year = date.getFullYear();
                    /* 在日期格式中,月份是从0开始,11结束,因此要加0
                     * 使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05
                     * */
                    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                    // 拼接
                    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
                }
            }

2.在表格中引入

  <el-table-column prop="time" label="签到时间"   :formatter="dateFormat"></el-table-column>

3.日期选择器解决选择日期与返回的值不一致的问题

  <el-date-picker
                v-model="time"
                type="date"
                value-format="yyyy-MM-dd"
                :formatter="dateFormat"
                placeholder="选择日期">
        </el-date-picker>

加上**value-format=“yyyy-MM-dd”**即可

你可能感兴趣的:(vue.js,javascript,前端)