vue.js - 如何从 HH :mm:ss to HH:mm 的 Bootstrap-vue 的 b-form-timepicker 组件返回日期格式

Question

Bootstrap-vue b-form-timepicker 返回 值，格式为 HH:mm:ss。我需要它的返回值为 HH:m'，但我找不到任何方法来更改它。

有没有办法将返回值格式改为HH:mm？如果有的话请帮忙。

Answer 1

您可以通过删除属性 show-seconds 来删除秒数，如 component table properties 中所述。 。然后我们将在 Vue 的 watcher 中使用普通 JavaScript 来格式化日期。像这样:

<template>
  <div>
    <label for="example-input">Choose a time</label>
    <b-input-group class="mb-3">
      <b-form-input
        id="example-input"
        v-model="value"
        type="text"
        placeholder="HH:mm"
      ></b-form-input>
      <b-input-group-append>
        <b-form-timepicker
          v-model="value"
          button-only
          right
          locale="en"
          aria-controls="example-input"
        ></b-form-timepicker>
      </b-input-group-append>
    </b-input-group>
    <p>Value: '{{ value }}'</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value() {
      this.value = this.value.split(':').slice(0,2).join(':');
    },
  },
};
</script>

您可以查看这个working code playground example .