How to set a value for the date field with JavaScript?

[Pnaumenko]

Hi there.

What is the correct way to set a value in the date field with JavaScript?
I'm doing it with the code

const date = new Date().toISOString().slice(0, 10);
$('[name="game_date"]').val(date).change();

But,  we are getting empty value for "game date" field in submissions on form sumbit.

[lisa302]

Still not solved! Anyne have a proper answer/solution. How to handle this problem. I am trying it on APK game 

[BarryGrennan]

Hi @lisa302, 

The person who started this thread marked my answer as the solution to their specific problem because it worked for them. If it's not working for your issue, I'd suggest starting your own thread detailing your problem. That way you'll get more visability as it'll be the newest post. People will also be able to offer a solution tailored to your specific issue in that instance also.

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[kpaxx]

Hey @Pnaumenko, were you able to get it to work? I'm running into the same issue - the date input is actually updated in the DOM, but onSubmit, the field does some kind of refresh and defaults to null (because the date picker interface was not used and therefore points to null). 

Inspecting the date picker revelas an HTML table where you could theoretically pinpoint the exact button that corresponds with your date - the button elements for a specific date look something like this:

<button class="pika-button pika-day" type="button" data-pika-year="2023" data-pika-month="1" data-pika-day="3">3</button>

But I'd rather not go down that route if you've found another solution 😅

[kpaxx]

OOO @Pnaumenko Actually I was able to get it working by hiding the field - This was always my plan, but I did not think that it would make a difference. However, because of the idea that the date picker interface was causing the issue, I tried hiding the field and running my original code worked

document.querySelector(selector).value = {{cookie value}}

[kpaxx]

By the way, in case you can't go with the hidden field strategy, I did actually wire up a button click method for logging a virtual click. In the example I mentioned with the button for jan 3rd, 2023, the selector and click would look like this:

document.querySelector('[class="pika-button pika-day"][type="button"][data-pika-year="2023"][data-pika-month="1"][data-pika-day="3"]').click();

The problem is that the event.isTrusted property is set to false for virtual interactions like that, and I couldn't figure out a solution to that. But that selector did work, and the click technically did log.

Good luck!

[BarryGrennan · Accepted solution]

Oh, also you're calling dateVal which is undefined instead of date, so it'd be:

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
const date = new Date().toISOString().slice(0, 10);
$('[name="date_of_birth"]').val(date).change();
   }
});

I've tested it and it seems to work as you intend.

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[BarryGrennan]

Hi @Pnaumenko , you might need to elaborate on what the project is a bit. And let us know if the field appears to be set prior to submission.

But my first suggestion would be that you need to wrap any javascript intended to affect a form in a global event listener.

 Specifically the on FormReady listener. e.g.

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
       console.log("Form Loaded!");
/* Your code here */
   }
});

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[Pnaumenko]

@BarryGrennan Thank you for your response, 'dateVal' was a typo in my example.
To be clear, this code runs on a button click and copies a value from the custom date picker to the Form's field.
It works okay before submitting the form or focusing on any form field when running HubSpot's validation (in my understanding). After that, it clears the value of the date field, other non-date fields are good

[BarryGrennan]

Hi @Pnaumenko, could you perhaps share your code so we can troubleshoot?

Have you wrapped it in the FormReady event listener?

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn