1. 导入dayjs插件
import dayjs from 'dayjs'
// 导入需要的时区数据
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'
dayjs.extend(utc)
dayjs.extend(timezone)
2. 页面使用
1.data 定义数据 dateUTCOptions时区下拉， valueUTC选中时区的值
data: { val: '', oldVal: '', valueUTC : '', name :''},
dateUTCOptions: [
{ label: 'UTC+08:00', value: '+08:00' }
],
valueUTC: '',
2. 初始化给时区赋值
created() {
this.valueUTC = this.dateUTCOptions[0].value
}
3.element date组件
<el-form-item prop="oldVal" :label="`${data.name}:`" >
<el-date-picker
v-model="data.oldVal"
type="datetime"
placeholder="选择日期时间"
@change="dateTimeUTC(data)"
@input="clearTime(data)"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
/>
<el-select v-model="data.valueUTC" placeholder="请选择时区" class="format-utc" @change="dateTimeUTC(data)">
<el-option v-for="item in dateUTCOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
4. 方法
dateTimeUTC(data) { // 时区转换
if (data.valueUTC) {
if (data.valueUTC.substring(0, 1) === '+') { // +处理
const str = data.valueUTC.replace('+', '-')
data.val = dayjs.utc(data.oldVal).utcOffset(str).format('YYYY-MM-DDTHH:mm:ss') + data.valueUTC
console.log( data. oldVal , data.val ) // 2023-08-15 00:00:00, 2023-08-14T16:00:00+08:00
} else if (data.valueUTC.substring(0, 1) === '-') { // -处理
const str = data.valueUTC.replace('-', '+')
data.val = dayjs.utc(data.oldVal).utcOffset(str).format('YYYY-MM-DDTHH:mm:ss') + data.valueUTC
}
}
//反向处理 明细显示 2023-08-14T16:00:00+08:00 ==》 2023-08-15 00:00:00 处理
// console.log(
// dayjs.utc(data.val.substring(0, 19))
// .utcOffset(data.val.substring(19, data.val.length+1))
// .format('YYYY-MM-DDTHH:mm:ss')
// )
},
clearTime(data) { // 时间清空
if (!data.oldVal) {
data.val = ''
data.valueUTC = this.valueUTC
}
}
