0

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.

audreywrong
  • 53
  • 6
  • 1
    consider using momentjs library – nathan hayfield May 04 '21 at 19:09
  • 2
    usually you add the timestamp in the back end code instead of on the form because users can alter the form data. also most databases have a default_timestamp that you can automatically populate when saving a record – nathan hayfield May 04 '21 at 19:10
  • Does this answer your question? [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) it has multiple ways to format a date in js which is what you need – Jimmar May 04 '21 at 19:15
  • Unfortunately I am not able to use a library in this specific use case, but I have seen that one. We work with an in-house application that has very specific/picky requirements for the data it can accept. So that is why we use hidden input fields with this date/time format. Jimmar I appreciate it, but that is not the format I specified. Thank you though! – audreywrong May 04 '21 at 19:52

1 Answers1

1

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

Maarten Veerman
  • 1,398
  • 1
  • 6
  • 10
  • Marteen, thank you so much. I believe this is exactly the missing piece. I am testing it now in our software to make sure. Was just a little flustered to be able to find this exact thing! – audreywrong May 04 '21 at 19:53
  • Do you know if a timeout is needed for the hidden field to be processed before the form is submit? – audreywrong May 04 '21 at 20:00
  • Why do you think that is needed? The date string is created on first mount of the component, and the hidden input recieves it immediately. Is it not coming through? Try: `:value="now"` instead of `v-model="now"`. – Maarten Veerman May 04 '21 at 20:03
  • I had been told that the timeout might be necessary as that is what they had to do when creating this template with angular.js originally. However I am testing your initial answer now and was also told by a mentor that the timeout is not needed. I agree that you both are right, and am testing now! Will upvote, etc as soon as tested. – audreywrong May 04 '21 at 20:23
  • Really appreciate the help Maarten! Everything is working perfectly and I feel the date/time format is even more foolproof. – audreywrong May 04 '21 at 22:24