# Date Picker Format Output

**URL:** <https://forum.bootstrapstudio.io/t/date-picker-format-output/12791>\
**Category:** Bootstrap Studio Help\
**Created:** [August 30, 2026, 11:21pm UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791 "2026-08-30T23:21:45Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![michael-mcgee](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/m/f1d935/32.png) [@michael-mcgee](https://forum.bootstrapstudio.io/u/michael-mcgee)\
**Post date:** [August 30, 2026, 11:21pm UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791/1 "2026-08-30T23:21:45Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![catkin](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/catkin/32/4993_2.png) [@catkin](https://forum.bootstrapstudio.io/u/catkin)\
**Post date:** [August 30, 2026, 11:31pm UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791/2 "2026-08-30T23:31:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![michael-mcgee](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/m/f1d935/32.png) [@michael-mcgee](https://forum.bootstrapstudio.io/u/michael-mcgee)\
**Post date:** [August 30, 2026, 11:33pm UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791/3 "2026-08-30T23:33:02Z")

</div>

How would this work as i am new to this

---

<div class="post-metadata">

**Author:** ![catkin](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/catkin/32/4993_2.png) [@catkin](https://forum.bootstrapstudio.io/u/catkin)\
**Post date:** [August 31, 2026, 12:06am UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791/4 "2026-08-31T00:06:46Z")

</div>

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:

```JS
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.

---

<div class="post-metadata">

**Author:** ![michael-mcgee](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/m/f1d935/32.png) [@michael-mcgee](https://forum.bootstrapstudio.io/u/michael-mcgee)\
**Post date:** [August 31, 2026, 12:16am UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791/5 "2026-08-31T00:16:54Z")

</div>

> [@catkin](#):
>
> ```auto
> 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}`;
> }
> });
> 
> ```

I could not get that to work

---

<div class="post-metadata">

**Author:** ![catkin](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/catkin/32/4993_2.png) [@catkin](https://forum.bootstrapstudio.io/u/catkin)\
**Post date:** [August 31, 2026, 12:19am UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791/6 "2026-08-31T00:19:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![michael-mcgee](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/m/f1d935/32.png) [@michael-mcgee](https://forum.bootstrapstudio.io/u/michael-mcgee)\
**Post date:** [August 31, 2026, 1:22am UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791/7 "2026-08-31T01:22:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![michael-mcgee](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/m/f1d935/32.png) [@michael-mcgee](https://forum.bootstrapstudio.io/u/michael-mcgee)\
**Post date:** [September 3, 2026, 8:37pm UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791/9 "2026-09-03T20:37:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![catkin](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/catkin/32/4993_2.png) [@catkin](https://forum.bootstrapstudio.io/u/catkin)\
**Post date:** [September 3, 2026, 8:52pm UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791/10 "2026-09-03T20:52:45Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![michael-mcgee](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/m/f1d935/32.png) [@michael-mcgee](https://forum.bootstrapstudio.io/u/michael-mcgee)\
**Post date:** [September 6, 2026, 3:42am UTC](https://forum.bootstrapstudio.io/t/date-picker-format-output/12791/12 "2026-09-06T03:42:38Z")

</div>

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