Element+dayjs 时区处理

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

      }

    }