Incorporating hidden input fields for date and time formatting in Vue.js 3

My goal is to include a hidden input field on a landing page template that captures the date and time in the format of: YYYY-MM-DD HH:MM:SS for each form submission.

This is the hidden input field:

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

Here is the Vue app logic I have implemented to determine the current date and time for submission:

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();
          }
        }
      }
    });

Do I require a timeout function? Or is there an issue with the formatting within the Date() function? I'm uncertain about what needs to be adjusted.

Answer №1

Your time stamp appears to be inaccurate:

current: new Date().toISOString()

If you provide the Date constructor with specific data, it will attempt to interpret that information and adjust its internal date values accordingly. For more details, refer to this resource from MDN Web Docs

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve the overall error status from the Material UI DataGrid?

I am currently utilizing the Material UI DataGrid element to display information from an EXCEL file. Each Excel document consists of numerous column titles with specific types assigned to them. As an example: const columns = [ { "field&quo ...

Guide on extracting the text from the <script> tag using python

I'm attempting to extract the script element content from a generic website using Selenium. <script>...</script> . url = 'https://unminify.com/' browser.get(url) elements = browser.find_elements_by_xpath('/html/body/script[ ...

Getting the text from an element in Protractor that does not have a class or id

I am facing an issue with retrieving text from an element that does not have a class assigned to it. Below is the HTML code snippet: <div><em>Min Amount Required is 150,000</em></div> This is my page object: var minAmount = el ...

Having trouble loading HTML content from another file

Here is the code snippet in question: <script> var load = function load_home(){ document.getElementById("content").innerHTML='<object type="type/html" data="/linker/templates/button.html" ></object>'; } </script> ...

Switch out the ajax data in the input field

Is there a way to update the value in a text box using Ajax? Below is my code snippet: <input type="text" id="category_name" name="category_name" value="<?php if(isset($compName)) { echo ucfirst($compName); ...

Jquery - Ajax: Error in Syntax JSON.parse: character not expected

I am encountering an issue with parsing JSON data on my client-side code. The JSON received from the server looks like this: [{"name":"Bubble Witch Saga 2","impressions":10749},{"name":"Grinder","impressions":11284},{"name":"Loovoo","impressions":12336},{" ...

What is the process for incorporating Transformer instances into the buildVideoUrl() function using cloudinary-build-url?

This particular package is quite impressive, however, it seems to lack built-in support for looping gifs. Fortunately, the provided link demonstrates how custom URL sections like "e_loop" can be created. One challenge I'm facing is figuring out how t ...

Having an issue with my code in angular 12 where I am unable to successfully call an API to retrieve a token, and then pass that token to another API for further processing

Here is the code snippet containing two methods: getToken and validateuser. I am fetching the token from getToken and passing it as a parameter to validateuser. However, before retrieving the token, my second API call is being executed. ...

What is the method for breaking down a React useState hook into separate variables within a namespace?

Personally, I like to group React props into namespaces for better organization. When using the useState hook, I follow this approach. function MyComponent() { const [todoCount, setTodoCount] = useState(100); const [doneCount, setDoneCount] = useSta ...

Updating is not allowed during a current state transition, like the one happening in `render` at the moment

Although this question has been asked many times before, I am still struggling to fix my code. It seems like calling setState in this way is causing an issue. I followed the example code from the material-ui website, so this should be easy, right? class ...

Modifying the CSS for a single page - specifically the contact us page - on a WordPress website

Recently, I developed a Wordpress website for a client. However, the client has a unique request - they want the Contact Us page to have a different design compared to the other pages on the site. I attempted to create a separate CSS file for the Contact ...

Error in Next.js: .env variable not defined

I recently transitioned my project from React to Next.js and encountered an issue where my environment variables are showing as undefined, even though they were functioning correctly in React. Can someone provide some guidance or assistance with this probl ...

Utilizing Highcharts/Highstock for handling large volumes of data efficiently

Dealing with a growing amount of data daily (currently over 200k MySQL rows in one week), the chart loading speed has become quite slow. It seems like using async loading is the solution (http://www.highcharts.com/stock/demo/lazy-loading). I attempted to i ...

JavaScript library imports function correctly in Chrome but encounter issues in Internet Explorer

I'm currently working with ASP.NET MVC 5 and encountering an issue when trying to incorporate various JavaScript libraries such as jQuery, bootstrap.js, and others. While it's functioning well in Chrome, I'm facing compatibility problems in ...

Pass information from ColdFusion to jQuery

I'm attempting to achieve a similar result as this, but I believe the syntax is not quite right: <cfset details = '{ name: "name", address:"address"}' /> <img data-details='#details#' onClick="DisplayDetails()" /> &l ...

What is the best way to add an automatic data loading feature while scrolling?

I've been grappling with this issue for a couple of days now. My current project involves displaying a list of topics, and everything seems to be functioning correctly. However, I'm facing an obstacle - when scrolling down to the bottom of the pa ...

Passing Laravel environmental information to a Vue component

I am struggling to retrieve my Stripe keys from my Laravel .env file and pass them into my Vue component. I came across some similar inquiries on Stack Overflow and the Laravel documentation that suggest using the MIX prefix, allowing me to access process. ...

Ways to refresh the main frame

Here is an example of parent code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Parent</title> </head> <body> <iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width ...

What is the reason behind the occurrence of "varchar to datetime out-of-range" error in Windows Server 2003 but not in Server 2008?

I have created a small Asp.net program using Entity Framework. My Stored Procedure takes in the following parameters: employeeID int, startDate varchar(12), endDate varchar(12) To handle the date strings, I utilize SQL server to convert them into DateTim ...

Having trouble parsing this JSON, getting duplicate results

Displayed below is the JSON data stored in data: { "dialogue":{ "id":"1", "backgroundURL":"http:\/\/db5mq3uumohzn.cloudfront.net\/course\/images\/english\/d-backgrounds\/onboard-metro.jpg" }, "di ...