Search code examples
javascriptvue.jsdatetimevuejs3hidden-field

How to format date and time for hidden input field - Vue.js 3


I am trying to have a hidden input field on a landing page template that gives date and time in the following format: YYYY-MM-DD HH:MM:SS as data to gather per form submission.

This is the input field:

<input type="hidden" name="hidden_submit_date" v-model="now" />

And this is my Vue app logic for determining the CURRENT date and time to be submit:

const app = Vue.createApp({
      data() {
        return {
          now: new Date("YYYY-MM-DDTHH:MM:SSZ")
        };
      },
      methods: {
        submitForm(e) {
          const isValid =
            this.contact.firstName ||
            this.contact.lastName ||
            this.contact.email;
          if (!isValid) {
            e.preventDefault();
          }
        }
      }
    });

Is a timeout needed? Or is it the formatting within the Date() function? I'm not sure what I'm missing here.


Solution

  • Your date line is incorrect:

    now: new Date().toISOString()
    

    If you call the Date constructor with data it will try to parse that data and set is internal date values. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date