How to return date format from Bootstrap-vue's b-form-timepicker component from HH:mm:ss to HH:mm

Question

Bootstrap-vue b-form-timepicker returns the value as with the format HH:mm:ss. I need its return value as HH:m', but I cannot find any way to change it.

Is there any way to change the return value format into HH:mm? If there is, please help.

Answer 1

You can remove the seconds by removing the property show-seconds as described in the component table properties. Then we'll format the date using vanilla JavaScript inside a Vue's watcher like so:

<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>

You can check this working code playground example.