写一个vue日期时间选择器

好的，以下是一个基于 Element UI 的 Vue.js 日期时间选择器示例代码。

前端代码：

<template>
  <div>
    <el-date-picker
      v-model="date"
      type="datetime"
      placeholder="选择日期时间"
      :picker-options="pickerOptions"
      :default-time="['00:00:00']"
      :value-format="'yyyy-MM-dd HH:mm:ss'"
      @change="handleChange">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 24 * 60 * 60 * 1000);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 7 * 24 * 60 * 60 * 1000);
            picker.$emit('pick', date);
          }
        }]
      }
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

其中，`el-date-picker` 是一个 Element UI 中的日期时间选择器组件。`v-model` 用于双向绑定选中的日期时间，`type` 用于指定选择器类型为日期时间，`placeholder` 用于设置占位符文本，`picker-options` 用于设置选择器的选项，`default-time` 用于设置默认时间，`value-format` 用于设置日期时间格式，`@change` 用于监听日期时间变化事件。

后端代码：

由于日期时间选择器是前端组件，所以不需要后端代码。如果您需要在后端处理日期时间数据，可以使用 Java 的日期时间 API 或者其他语言相应的 API 进行处理。