<p>For me, saving dates as a timestamp seems to do the trick to correctly save to the date field in Craft. You can still use the datepicker and have the human readable date, just use the altField and altFormat options (<a href="https://jqueryui.com/datepicker/#alt-field" rel="nofollow noreferrer">https://jqueryui.com/datepicker/#alt-field</a>) to fill a hidden field with the timestamp that gets submitted.</p>

CC BY-SA 4.0
2020-07-10T16:28:46.163Z
Thank you. I was using fdatepicker which I dont think has altField. I switched to Jquery datepicker but altField using a jQuery selector does not work for me. It works when referencing the actual class, but not with a selector. I need to use this selector as I have multiple date fields: 
altField: $(this).next() -> doesn't work!
Laurence Cope
CC BY-SA 4.0
2020-07-09T21:07:57.347Z
2020-07-09T21:07:57.347Z
Brianne Hostutler
<p>Maybe this reference helps you; <a href="https://docs.craftcms.com/v3/date-time-fields.html" rel="nofollow noreferrer">https://docs.craftcms.com/v3/date-time-fields.html</a></p>
<p>Your date field will be like this.</p>
<pre><code>{% set tz = craft.app.getTimezone() %}
{% set df = craft.app.locale.getDateFormat('short', 'php') %}

&lt;input type=&quot;text&quot; id=&quot;startDate&quot; name=&quot;fields[startDate][date]&quot; {%- if user is defined %} value=&quot;{{ user.startDate|date(df, tz) }}&quot;{% endif %}&gt;
    {{ hiddenInput('fields[startDate][timezone]', tz) }}
&lt;/div&gt;
</code></pre>
<p>Regarding date format, In front-end form, date format should be YYYY-MM-DD or current locale's short date format.</p>
<p>If the locale is &quot;en&quot;, the date format is &quot;m/d/y&quot;.
Perhaps it is &quot;d/m/y&quot; if the locale is &quot;en-gb&quot; (not &quot;en&quot;), but I am not sure.</p>

CC BY-SA 4.0
2020-07-10T16:32:30.840Z
2020-07-10T18:12:43.333Z
2020-07-10T18:12:43.333Z
Kota.M
<p>I have a date field on a front end form, currently with this HTML:</p>
<pre><code>&lt;input class=&quot; date-picker startDate&quot; type=&quot;text&quot; id=&quot;startDate&quot; name=&quot;fields[startDate]&quot; value=&quot;&quot;&gt;
</code></pre>
<p>I use a JQuery date-picker and have set its format to dd/mm/yyyy</p>
<p>The date displays in the field this format correct, but upon saving no date is saved. I guess its due to the format not being Crafts yyyy-mm-dd because if I set the date-picker format to this, it does save it OK. BUT I obviously dont want to display my dates like this.</p>
<p>How can I display dates in correct human date format in the fields, and save them to the DB correct? Do I need to process all dates in PHP in a plugin to the correct format first?</p>
<p>The field in Craft admin for the entry displays d/m/y OK and that saves.</p>
<p>Thanks</p>

<craft3>
How to use different date format in front end form?
# How to use different date format in front end form?

(Asked by: username_0 on 2020-07-09)

I have a date field on a front end form, currently with this HTML:


I use a JQuery date-picker and have set its format to dd/mm/yyyy
The date displays in the field this format correct, but upon saving no date is saved. I guess its due to the format not being Crafts yyyy-mm-dd because if I set the date-picker format to this, it does save it OK. BUT I obviously dont want to display my dates like this.
How can I display dates in correct human date format in the fields, and save them to the DB correct? Do I need to process all dates in PHP in a plugin to the correct format first?
The field in Craft admin for the entry displays d/m/y OK and that saves.
Thanks

**Tags:** craft3


---

## 2 answers

### Answer by username_1 on 2020-07-09. Score: 1

For me, saving dates as a timestamp seems to do the trick to correctly save to the date field in Craft. You can still use the datepicker and have the human readable date, just use the altField and altFormat options (<https://jqueryui.com/datepicker/#alt-field>) to fill a hidden field with the timestamp that gets submitted.

> **Comments:**
> **username_0**: Thank you. I was using fdatepicker which I dont think has altField. I switched to Jquery datepicker but altField using a jQuery selector does not work for me. It works when referencing the actual class, but not with a selector. I need to use this selector as I have multiple date fields:  altField: $(this).next() -> doesn't work!  

---

### Answer by username_2 on 2020-07-10. Score: 1

Maybe this reference helps you; https://docs.craftcms.com/v3/date-time-fields.html
Your date field will be like this.
{% set tz = craft.app.getTimezone() %}
{% set df = craft.app.locale.getDateFormat('short', 'php') %}


    {{ hiddenInput('fields[startDate][timezone]', tz) }}


Regarding date format, In front-end form, date format should be YYYY-MM-DD or current locale's short date format.
If the locale is "en", the date format is "m/d/y".
Perhaps it is "d/m/y" if the locale is "en-gb" (not "en"), but I am not sure.


---

