Formatting th:field in Thymeleaf

13
votes

I have a form input field in Thymeleaf. The field (bookingEntry.datefrom in the code snippet below) is type Date. I use a datepicker to allow the user to select and format the required date to enter the field. This is all fine.

However, I want the initial value of the date (which I have set to the current date) to be displayed in the format that I choose. So, how do I format the date initially shown in a th:field. th:value is ignored (Thymeleaf is getting the value from the backing object, as it should) and I can't seem to apply a format to the th:field.

Thymeleaf code is:

<input type="text" class="form-control getdate"
       th:field="*{datefrom}" placeholder="Date From"
       th:value="${#dates.format(bookingEntry.datefrom, 'dd-MMM-yyyy')}"/>

I'm sure that I could use a String which is initialise in any format that I choose, rather than a Date type, but I wondered if there was a way to format initial values in a th:field?

Many thanks

2
spring-mvcthymeleaf

2 Answers

23
votes

I missed the simple answer, simply because of my limited knowledge of Spring. I'm adding it here incase it helps any other novices like me. The @DateTimeFormat annotation on the element in the object being passed to the form does the job. It ensures that the Date object is formatted in the way that you wish (irrespective of whether you are using Thymeleaf or not).

In the example above, within the bookingEntry object

@Temporal(DATE)
@DateTimeFormat (pattern="dd-MMM-YYYY")
private Date datefrom;
2
votes

In case your date is null, it will give you error. We have to check the value before we parse the date.

<input  type="text" name="date" 
        th:value="${user.dateOfBirth}?${#dates.format(user.dateOfBirth, 'dd-MM-yyyy')}:''" 
        placeholder="dd-mm-yyyy"  id="pickyDate"/>