解决element DateTimePicker+vue弹出框只显示小时

要解决element DateTimePicker+vue弹出框只显示小时的问题，可以按照以下步骤操作：

1. 引用element-ui库和相关组件

首先，在Vue项目中引入element-ui库，并按需引入DatetimePicker组件。

<template>
  <div>
    <el-date-picker
      v-model="date"
      type="datetime"
      format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
import { DatePicker } from 'element-ui';

export default {
  name: 'DateTimePickerExample',
  components: {
    'el-date-picker': DatePicker
  },
  data() {
    return {
      date: '',
      pickerOptions: {
        start: '09:00',
        step: '00:30',
        end: '18:00'
      }
    };
  }
};
</script>

2. 加载moment.js依赖

为了能够格式化日期和时间，需要在项目中引入moment.js依赖。可以使用npm进行安装，如下：

npm install moment --save

3. 定义filter方法进行格式化日期和时间

接下来，在Vue项目中定义filter方法，以便在模版中使用moment.js进行日期和时间的格式化。这样我们就可以将日期和时间格式化成想要的样式。

<template>
  <div>
    <el-date-picker
      v-model="date"
      type="datetime"
      format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss"
      :picker-options="pickerOptions">
    </el-date-picker>
    {{ date | dateTimeFormat }}
  </div>
</template>

<script>
import { DatePicker } from 'element-ui';
import moment from 'moment';

export default {
  name: 'DateTimePickerExample',
  components: {
    'el-date-picker': DatePicker
  },
  filters: {
    dateTimeFormat: function (value) {
      if (!value) {
        return '';
      }
      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  data() {
    return {
      date: '',
      pickerOptions: {
        start: '09:00',
        step: '00:30',
        end: '18:00'
      }
    };
  }
};
</script>

在模版中，我们可以使用管道符将日期时间的值传递给dateTimeFormat过滤器进行格式化。在dateTimeFormat过滤器中，我们使用moment.js将日期时间格式化成字符串格式。

示例说明

示例一

假如我们需要将日期和时间格式化成yyyy年MM月dd日HH时mm分ss秒这种中文格式，只需在dateTimeFormat过滤器中更改format方法中的参数即可，该方法中YYYY表示4位年份，MM表示2位月份，DD表示2位日期，HH表示24小时制小时数，mm表示分钟，ss表示秒。

<template>
  <div>
    <el-date-picker
      v-model="date"
      type="datetime"
      format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss"
      :picker-options="pickerOptions">
    </el-date-picker>
    {{ date | dateTimeFormat('YYYY年MM月DD日HH时mm分ss秒') }}
  </div>
</template>

<script>
import { DatePicker } from 'element-ui';
import moment from 'moment';

export default {
  name: 'DateTimePickerExample',
  components: {
    'el-date-picker': DatePicker
  },
  filters: {
    dateTimeFormat: function (value, format) {
      if (!value) {
        return '';
      }
      return moment(value).format(format);
    }
  },
  data() {
    return {
      date: '',
      pickerOptions: {
        start: '09:00',
        step: '00:30',
        end: '18:00'
      }
    };
  }
};
</script>

示例二

假如我们需要将时间格式化成HH:mm这种格式，只需更改format和value-format属性的值即可。

<template>
  <div>
    <el-date-picker
      v-model="time"
      type="time"
      format="HH:mm"
      value-format="HH:mm"
      :picker-options="pickerOptions">
    </el-date-picker>
    {{ time | timeFormat }}
  </div>
</template>

<script>
import { TimePicker } from 'element-ui';
import moment from 'moment';

export default {
  name: 'TimePickerExample',
  components: {
    'el-time-picker': TimePicker
  },
  filters: {
    timeFormat: function (value) {
      if (!value) {
        return '';
      }
      return moment(value, 'HH:mm').format('hh:mm A');
    }
  },
  data() {
    return {
      time: '',
      pickerOptions: {
        start: '09:00',
        step: '00:30',
        end: '18:00'
      }
    };
  }
};
</script>

在timeFormat过滤器中，我们使用了moment.js将时间格式化成hh:mm A这种格式，其中hh表示12小时制小时数，mm表示分，A表示AM或PM。