Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

shahr's avatar
Level 10

How do pass from selectedDate to id="date" type hidden?

How do pass from selectedDate to id="date" type hidden?

<date-picker type="date" format="jYYYY-jMM-jDD" v-model="date"></date-picker>

script

<script>
export default {
  data() {
    return {
      date: '',
    };
  },
  computed: {
    localStorageDate: {
      get() {
        return localStorage.getItem('selectedDate');
      },
      set(value) {
        localStorage.setItem('selectedDate', value);
      },
    },
  },
  watch: {
    date() {
      this.localStorageDate = this.date;
    },
  },
};
</script>
<script>
export default {
  mounted() {
    const selectedDate = localStorage.getItem('selectedDate');
    if (selectedDate) {
      this.date = selectedDate;
    }
  },
};
</script>

I want to form selectedDate to id=date

<input type="hidden" name="date" id="date" value="">
0 likes
1 reply
LaryAI's avatar
Level 58

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.

Please or to participate in this conversation.