To pass the selectedDate to the hidden input field with id="date", you can use the v-model directive to bind the value of the input field to the selectedDate variable. Here's an example:
<template>
<div>
<date-picker type="date" format="jYYYY-jMM-jDD" v-model="date"></date-picker>
<input type="hidden" name="date" id="date" v-model="selectedDate">
</div>
</template>
<script>
export default {
data() {
return {
date: '',
selectedDate: '',
};
},
computed: {
localStorageDate: {
get() {
return localStorage.getItem('selectedDate');
},
set(value) {
localStorage.setItem('selectedDate', value);
},
},
},
watch: {
date() {
this.localStorageDate = this.date;
this.selectedDate = this.date; // update the value of selectedDate
},
},
mounted() {
const selectedDate = localStorage.getItem('selectedDate');
if (selectedDate) {
this.date = selectedDate;
this.selectedDate = selectedDate; // set the initial value of selectedDate
}
},
};
</script>
In this example, we added an input field with type="hidden" and id="date", and used the v-model directive to bind its value to the selectedDate variable. We also updated the value of selectedDate in the watch hook whenever the date variable changes, and set its initial value in the mounted hook if it exists in the localStorage.