1

I have a user object, and the User is having a field DOB (Date of Birth) I have stored that field as a calendar inside the User BO.

Something like this:

public class UserBO {

private Calendar dateOfBirth;

public Calendar getDateOfBirth() {
    return dateOfBirth;
}

public void setDateOfBirth(Calendar dateOfBirth) {
    this.dateOfBirth = dateOfBirth;
}

}

Now I need to display this field as a Date field in thymeleaf and not a text field. I need a date field since I like the date picker :)

This is what I have so far 

<label class="col-xs-2">Date of Birth</label>
    <div class="col-xs-2">
    <input type="date" class="form-control" th:field="*{dateOfBirth}" placeholder="Date of Birth" />
    </div>

But this gives me the output as

Image of output

this is not what I am expecting. I am expecting an actual date to be populated from the service but its showing me this as above.

I have read about Seralization & deserialization of Calendar objects and writing some sort of converters but I did not get full context why is this required. plus when I have seen examples with

input type="text" and the dates are populated correctly. SO can some one please guide me what is the fundamentals for this conversion and and example of how this should be done would be nice.

thanks

user641887
  • 1,506
  • 3
  • 32
  • 50

2 Answers2

0

Firstly you need not use Calendar. A simple java.util.Date is sufficient.

So you can use bootstrap datepicker for client side date picker. Suppose the format the date picker expects is mm/dd/yyyy, then you can use Thymeleaf expression object to format the dateOfBirth as ${#dates.format(dateOfBirth, 'MM/dd/yyyy')}

Note that the format used by Thymeleaf is similar to the one used by SimpleDateFormat and the one used by Datepicker can be found from the docs here

MohamedSanaulla
  • 6,112
  • 5
  • 28
  • 45
  • well, Calendar I cannot change it to Date. due to other dependencies in the service layer. Secondly, instead of using bootstrap calendar why cant i just use ? this would give me the option of the date picker as well.. so i am yet to figure out how its done in thymeleaf – user641887 Nov 09 '17 at 21:04
  • `datepicker` is not a Thymeleaf concern. Yes you can use the `type="date"` just make sure its support in `IE`. There is a default format used by `type="date"` so you need to format the date using that format. Yes you can use `Calendar` and get `Date` object from it which you can return :) – MohamedSanaulla Nov 09 '17 at 21:08
  • if you see above, that is what i m trying to do but its not working...i get the Date of birth value populated as mm/dd/yyyy instead of the actual date.. any ideas ?? – user641887 Nov 10 '17 at 07:14
  • You cannot just do `th:field="*{dateOfBirth}"` you need to use the `#dates` expression to format it in your required format. – MohamedSanaulla Nov 10 '17 at 07:53
0

When you are using input elements of type date, the date value should be always formatted as yyyy-mm-dd. The displayed date format will be chosen based on the set locale of the user's browser.

Try this code:

  <input type="date" value="10/14/2016" class="form-control" id="dateOfBirth"
              th:value="${#calendars.format(dateOfBirth,'yyyy-MM-dd')}" th:name="dateOfBirth" />
akreddy.21
  • 626
  • 3
  • 8
  • 21
  • I am using th:field instead of th:value and th:name for every other property, and when I try using th:field this does not work.. any ideas why ? – user641887 Nov 14 '17 at 20:33
  • conversion issue between String and java.util.Date. If you really want to go with th:field, before binding date to form add formatting to bean attribute like @DateTimeFormat(pattern = "yyyy-MM-dd") – akreddy.21 Nov 15 '17 at 12:59
  • Why it's a conversion issue between string and date. Shouldn't it be a conversion issue between strong and calendar ? I am still stuck with this issue and finding it hard to resolce the problem . Any ideas ? – user641887 Nov 23 '17 at 20:48
  • The idea is to use th:field and map a string date to calendar object on controller. But nothing seems to work – user641887 Nov 23 '17 at 20:49