Date Picker Format Output

Bootstrap Studio Help
1

Am I able to change the date format in the date picker to show Australian date output, i.e 31/08/2026? Currently when my form processes with bootstrap studio smart forms the date comes in like 2026/08/31. Is there any way to change this ?

2

Yes and no.

For the default HTML date picker, it’s always submitted in the format of YYYY-MM-DD.

Typically, you’d then take this format and modify it to the date format required. However, Bootstrap Studio hosts the server that does the handling and they choose not to modify this value.

You can however get around this by creating a hidden form input in your form, and use some JavaScript to take the date format from the input, transform it and then put that into the hidden input.

Using JavaScript to modify the normal date picker wouldn’t be a good idea since it could hinder accessibility and best practices.

I hope this information helps.

3

How would this work as i am new to this

4

Sure, no problem!

  1. Search for a component called Hidden Input, and then drag this into your <form> element, probably under the date input, don’t worry, as the name suggests you won’t be able to see it in the form.
  2. From the Options panel on the right of the screen, give the input the name “date”
  3. Then for the Date and Time input, give this the new name “date_iso”
  4. Finally, go to the JavaScript file tag in the Design panel in the bottom right of the application and go to New > JS file, and give this any name you like.
  5. Paste in the following JS code into the file:
document.querySelector('form').addEventListener('submit', () => {
    const input = document.querySelector('[name="date_iso"]');
    const output = document.querySelector('[name="date"]');

    if (input.value) {
        const [year, month, day] = input.value.split('-');
        output.value = `${day}/${month}/${year}`;
    }
});

Now when you next send a Smart Form, it should have the date field, in the DD/MM/YYYY format and also a date_iso field in the YYYY-MM-DD format.

Let me know if you have any issues.

1 Like
5

I could not get that to work

6

Could you be more descriptive on what didn’t work for you?

Are you having trouble finding where to put the code?

Did the fields not show up in the email?

7

I am not sure how to place the code and i tried but when I uploaded the site to my test server the date still comes in american format

9

I did all the steps that you outlined above and the date still formats as American format.

10

Got a photo of the email?

If you can, please share the HTML code for your <form>

And a photo of the assets panel, in the bottom right of the application.

That should help me figure out the issue!

11

(post deleted by author)

1 Like
12

The hidden input shows up in the form output data, I end up with 2 dates instead of just one.