Vue2 日期时间选择器改造，日期和时间面板直接平铺选择

Vue2中的日期时间选择器可以通过自定义组件或者使用现成的UI库进行改造，使其支持日期和时间面板平铺显示并独立选择。例如，可以利用`element-ui`的`el-date-picker`组件，通过调整其样式和配置，实现这种布局。

首先，安装`element-ui`：

npm install element-ui

然后，在组件文件中，如`CustomDatePicker.vue`：

<template>
  <div class="custom-datepicker">
    <el-date-picker
      v-model="value"
      type="datetime"
      value-format="yyyy-MM-dd HH:mm:ss"
      range-separator=" - "
      start-placeholder="开始日期"
      end-placeholder="结束时间"
      style="{width: '100%', display: 'flex', flexDirection: 'row'}"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  name: "CustomDatePicker",
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style scoped>
.custom-datepicker {
  .el-date-picker__wrapper {
    flex-wrap: wrap;
  }
  
  .el-date-picker__time-panel {
    flex-basis: 50%;
  }
}
</style>

在这个例子中，我们设置了日期和时间选择器都占总宽度的一半(`flex-basis: 50%`)，并且通过CSS实现了垂直方向的堆叠布局(`flex-wrap: wrap`)。

现在，你可以将这个自定义日期时间选择器添加到Vue项目中并使用：

<template>
  <div>
    <CustomDatePicker :value="selectedDateTime" @change="handleDateChange"></CustomDatePicker>
  </div>
</template>

<script>
import CustomDatePicker from '@/components/CustomDatePicker.vue';

export default {
  components: { CustomDatePicker },
  data() {
    return {
      selectedDateTime: "",
    };
  },
  methods: {
    handleDateChange(value) {
      this.selectedDateTime = value;
    },
  },
};
</script>