53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<template>
|
|
<b-field class="column mb-0 pb-0" :class="columnSize" :label="label">
|
|
<b-datepicker
|
|
icon="calendar-today"
|
|
locale="es-MX"
|
|
placeholder="Selecciona una fecha"
|
|
:icon-right="botonCerrar ? (fecha ? 'close-circle' : '') : ''"
|
|
:max-date="fechaMaxima"
|
|
:min-date="fechaMinima"
|
|
:unselectable-days-of-week="[0, 7]"
|
|
@icon-right-click="clearDate"
|
|
v-model="fecha"
|
|
icon-right-clickable
|
|
trap-focus
|
|
>
|
|
</b-datepicker>
|
|
</b-field>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
botonCerrar: { typeof: Boolean, required: false, default: false },
|
|
fechaMaxima: { typeof: Date, required: true, default: () => new Date() },
|
|
fechaMinima: { typeof: Date, required: true, default: () => new Date() },
|
|
fechaPadre: { typeof: Date, required: true, default: () => new Date() },
|
|
columnSize: { typeof: String, required: false, default: '' },
|
|
label: { typeof: String, required: true, default: '' },
|
|
},
|
|
data: () => {
|
|
return { fecha: null }
|
|
},
|
|
methods: {
|
|
clearDate() {
|
|
this.fecha = null
|
|
},
|
|
},
|
|
watch: {
|
|
fecha() {
|
|
this.$emit('fecha', this.fecha)
|
|
},
|
|
fechaPadre() {
|
|
this.fecha = this.fechaPadre
|
|
},
|
|
},
|
|
created() {
|
|
if (this.fechaPadre) this.fecha = this.fechaPadre
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|