How to show th:value in Thymeleaf date format? - html

Question

I have a problem with Thymeleaf date format when I send a date. The HTML shows the date correctly within a h3 tag but not inside the code of the datepicker and I can not understand why....
<div>
<label for="birthdate" th:text="#{editprofile.about4.birthdate}">Birth date</label>
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="date" name="date" id="birthdate" class="form-control margin-bottom-20" th:value="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}" th:field="*{birthdate}">
</input>
</label>
<h3 th:text="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}"></h3>
</div>
why it shows the date with hours in one place and correctly in the other...... input type="date" name="birthdate" id="birthdate" class="form-control margin-bottom-20" value="1932-10-10 00:00:00.0"
Thanks

Answer 1

th:field and th:value shouldn't be used on the same tag. (th:field sets the name, id and value attributes of the tag it is on.) You'll see that you would get the correct formatting if you left off th:field, but then the form wouldn't submit correctly. In my opinion, the way to fix this is to:
Add an InitBinder method to your controller, like this:
#Controller
public class WhateverController {
.
.
.
#InitBinder
public void initBinder (WebDataBinder binder) {
binder.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateFormat("yyyy/MM/dd"), true));
}
.
.
.
}
Remove the th:value. Your HTML should look like this:
<div>
<label for="birthdate" th:text="#{editprofile.about4.birthdate}">Birth date</label>
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="date" name="date" id="birthdate" class="form-control margin-bottom-20" th:field="*{birthdate}" />
</label>
<h3 th:text="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}"></h3>
</div>
There are ways to add global binders as well, if you want this to work for your entire application and not just that one controller.

Answer 2

Ensure that the date passed in as value (in this case birthdate) is of this format:
yyyy-mm-dd
and NOT in the date picker's format mm/dd/yyyy
Read more here.