elementUI msgbox如何使用日期时间选择器显示日期时间范围，并且可以改变它的值

可以使用ElementUI的DatePicker和TimePicker组件来实现日期时间选择器，并且可以通过msgbox组件来显示它们。

以下是一个示例代码，可以在msgbox中显示一个日期时间选择器，并且可以选择日期时间范围并且可以改变它的值：

<template>
  <div>
    <el-button @click="showMsgbox">显示日期时间范围选择器</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    showMsgbox() {
      this.$msgbox({
        title: '选择日期时间范围',
        message: '<el-date-picker v-model="dateRange" type="daterange" :picker-options="rangeOptions"></el-date-picker><el-time-picker v-model="timeRange" :picker-options="rangeOptions"></el-time-picker>',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            // 用户点击确认按钮
            console.log(this.dateRange[0], this.dateRange[1], this.timeRange[0], this.timeRange[1]);
          }
          done();
        }
      }).then(() => {
        // 用户点击确定按钮
      }).catch(() => {
        // 用户点击取消按钮
      });
    }
  },
  data() {
    return {
      dateRange: [], // 日期范围
      timeRange: [], // 时间范围
      rangeOptions: { // 可选的时间范围
        start: '00:00',
        step: '00:30',
        end: '23:59'
      }
    };
  }
};
</script>

在这个示例代码中，我们使用了el-date-picker和el-time-picker组件来分别显示日期范围和时间范围选择器。我们将它们放在msgbox组件中，并且设置showCancelButton为true以显示取消按钮，设置beforeClose回调函数来获取用户的选择结果。用户可以通过选择日期时间范围来改变它的值，我们可以在beforeClose回调函数中获取用户选择的值。