88 lines
2.2 KiB
Vue
88 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="columns has-text-centered">
|
||
|
|
<div class="column">
|
||
|
|
<p class="subtitle is-5">Selecciona la hora de inicio</p>
|
||
|
|
<b-clockpicker
|
||
|
|
type="is-info"
|
||
|
|
v-model="horaInicio"
|
||
|
|
inline
|
||
|
|
:min-time="minTime"
|
||
|
|
:max-time="maxTime"
|
||
|
|
:locale="locale"
|
||
|
|
:hour-format="hourFormat"
|
||
|
|
></b-clockpicker>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="subtitle is-2" v-if="tipo === 'cambiarHora'">
|
||
|
|
{{ diaSeleccion.dia.dia }}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="column">
|
||
|
|
<p class="subtitle is-5">Selecciona la hora de fin</p>
|
||
|
|
<b-clockpicker
|
||
|
|
type="is-info"
|
||
|
|
v-model="horaFin"
|
||
|
|
inline
|
||
|
|
:min-time="minTime"
|
||
|
|
:max-time="maxTime"
|
||
|
|
:locale="locale"
|
||
|
|
:hour-format="hourFormat"
|
||
|
|
></b-clockpicker>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="has-text-centered">
|
||
|
|
<b-button class="my-5" type="is-success" @click="funcionHora()"
|
||
|
|
>Guardar</b-button
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import axios from 'axios'
|
||
|
|
import moment from 'moment'
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
cambiarHora: { type: Function, require: false },
|
||
|
|
horaExcepcion: { type: Function, require: false },
|
||
|
|
diaSeleccion: { type: Object, require: true },
|
||
|
|
tipo: { type: String, require: true },
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
const min = new Date()
|
||
|
|
min.setHours(7)
|
||
|
|
min.setMinutes(0)
|
||
|
|
const max = new Date()
|
||
|
|
max.setHours(20)
|
||
|
|
max.setMinutes(0)
|
||
|
|
return {
|
||
|
|
minTime: min,
|
||
|
|
maxTime: max,
|
||
|
|
horaInicio: new Date(`01-01-2022 09:00`),
|
||
|
|
horaFin: new Date(`01-01-2022 17:45`),
|
||
|
|
locale: 'es-ES', // Browser locale
|
||
|
|
hourFormat: '24', // Browser locale
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
funcionHora() {
|
||
|
|
if (this.tipo === 'cambiarHora')
|
||
|
|
this.cambiarHora(
|
||
|
|
this.diaSeleccion.id_institucion_dia,
|
||
|
|
moment(this.horaInicio).format('HH:mm'),
|
||
|
|
moment(this.horaFin).format('HH:mm'),
|
||
|
|
true
|
||
|
|
)
|
||
|
|
else
|
||
|
|
this.horaExcepcion(
|
||
|
|
this.diaSeleccion.id_institucion_dia,
|
||
|
|
moment(this.horaInicio).format('HH:mm'),
|
||
|
|
moment(this.horaFin).format('HH:mm')
|
||
|
|
)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|