Two datepicker components are present, one for "From" date and another for "To" date.
If the "To" date is empty, I want to automatically update it with the value from the "From" date.
I have considered using 'emit' on the value but I am unsure if this is the right approach or how to implement it.
<datepicker
input-label="From"
input-id="start-date"
input-name="start_date"
input-value="<%= group_discount.start_date %>"
@change-date="changeDate"
>
</datepicker>
<datepicker
input-label="To"
input-id="end-date"
input-name="end_date"
input-value="<%= group_discount.end_date %>">
</datepicker>
import Vue from "vue"
import Datepicker from "../components/DatePicker"
Vue.use(Datepicker)
const initGroupDiscount = () => {
new Vue({
el: "#js-group-discounts",
components: {
Datepicker,
},
methods: {
changeDate(value) {
console.log("value")
console.log(value)
},
},
})
}
document.addEventListener("DOMContentLoaded", () => {
initGroupDiscount()
})
<template>
<div >
<label :for="this.inputId">{{ this.inputLabel }}</label>
<input type="text"
class="form-control form-control-info"
placeholder="dd/mm/yyyy"
:name="this.inputName"
:id="this.inputId"
pattern="\d{1,2}/\d{1,2}/\d{4}"
required
v-model="isInput"
v-on:keyup="updateCalendar($event)"
ref="dateinput"
@blur="blur"
@focus="focus">
<datepicker format="dd/MM/yyyy"
input-class="form-control"
placeholder="dd/mm/yyyy"
v-model="isPicker"
:inline="true"
v-show="isOpen"
@mouseover.native="mouseOver"
@mouseleave.native="mouseLeave"
@selected="updateInput"></datepicker>
</div>
</template>
<script>
import Vue from "vue"
import Datepicker from "vuejs-datepicker"
Vue.use(Datepicker)
export default {
name: "neptune-datepicker",
props: {
inputLabel: {
type: String,
},
inputId: {
type: String,
},
inputValue: {
type: String,
},
inputName: {
type: String,
},
},
data(){
let value = ""
if (this.inputValue) {
const dateParts = this.inputValue.split("-")
value =`${dateParts[2]}/${dateParts[1]}/${dateParts[0]}`
}
return {
isInput: value,
isPicker: this.inputValue,
isOpen: false,
}
},
components: {
Datepicker
},
methods: {
updateInput(date) {
this.isInput = date.toLocaleDateString("en-GB")
this.$emit('changeDate', this.isInput);
},
updateCalendar(event) {
const dateString = event.srcElement.value
if (dateString.length === 10) {
const dateParts = dateString.split("/")
const dateObject = new Date(
dateParts[2],
dateParts[1],
dateParts[0],
)
if ((dateObject !== "Invalid Date") && !Number.isNaN(dateObject)) {
this.isPicker = dateObject
}
}
},
blur() {
this.isOpen = false
},
focus() {
this.$refs.dateinput.focus()
this.isOpen = true
},
mouseOver() {
this.$refs.dateinput.focus()
this.isOpen = true
},
mouseLeave() {
this.$refs.dateinput.focus()
this.isOpen = true
},
},
}
</script>
The correct value is emitting to the console, but passing it only to the specific instance of the component for the "To" date remains unclear.