pcpuma_unam_operador/components/admin/Reloj.vue

<template>
  <b-field class="column" :label="`Selecciona la hora ${tipo}`">
    <b-clockpicker
      hour-format="24"
      locale="es-ES"
      type="is-info"
      :min-time="minTime"
      :max-time="maxTime"
      v-model="hora"
      inline
    />
  </b-field>
</template>

<script>
import moment from 'moment'

export default {
  props: {
    horaStr: { type: String, required: true, default: '' },
    tipo: { type: String, required: true, default: '' },
  },
  data() {
    return {
      minTime: new Date(`${moment().format('DD-MM-YYYY')} 07:00`),
      maxTime: new Date(`${moment().format('DD-MM-YYYY')} 20:00`),
      hora: new Date(),
    }
  },
  watch: {
    hora(horaSeleccionada) {
      this.$emit('hora-seleccionada', horaSeleccionada)
    },
  },
  created() {
    if (this.horaStr)
      this.hora = new Date(`${moment().format('YYYY-MM-DD')} ${this.horaStr}`)
  },
}
</script>