<input type=“date”> format

Question

I had field "desired start date" which was a text field. I was storing the date as a long in mongoDb and displaying it as a String , also getting it as a String with SimpleDateFormat class. I found out about <input type="date"> and I am trying to make it work now. I am trying to get the date selected as YYYY-MM-DD format and display it with a YYYY-MM-DD format, but nothing changes on the calendar.

public class DateFormatterUtils {

    public static Long formatDate(String date) {
        if (date != null && !date.equals("")) {
            List<SimpleDateFormat> datePatterns = new ArrayList<SimpleDateFormat>();
            datePatterns.add(new SimpleDateFormat("dd MM yyyy"));
            datePatterns.add(new SimpleDateFormat("dd-MM-yyyy"));
            datePatterns.add(new SimpleDateFormat("dd/MM/yyyy"));
            datePatterns.add(new SimpleDateFormat("dd.MM.yyyy"));
            datePatterns.add(new SimpleDateFormat("dd,MM,yyyy"));
            datePatterns.add(new SimpleDateFormat("ddMMyyyy"));
            datePatterns.add(new SimpleDateFormat("dd:MM:yyyy"));
            datePatterns.add(new SimpleDateFormat("dd_MM_yyyy"));
            datePatterns.add(new SimpleDateFormat("MM/dd/yyyy"));
            datePatterns.add(new SimpleDateFormat("YYYY-MM-DD"));
            datePatterns.add(new SimpleDateFormat("yyyy-mm-dd"));

            for (SimpleDateFormat pattern : datePatterns) {
                try {
                    return pattern.parse(date).getTime();
                } catch (ParseException e) {

                }
            }
        }
        return null;

    }

    public static String readDate(Long timeStamp) {
        if (timeStamp == null) {
            return "";
        }
        SimpleDateFormat formatter = new SimpleDateFormat("YYYY-MM-DD");
        Date date = new Date(timeStamp);
        return formatter.format(date);
    }

}

This is my old method helping me get the inputs in differrent formats and the readDate() was displaying it as dd/MM/yyyy format. I checked in the documentation and the date is in YYYY-MM-DD pattern. When the view is generated with thymeleaf the field of this calendar stays as mm/dd/yyyy with no date selected

Answer 1

In HTML5 input type date has a format yyyy-mm-dd ( RFC3339 as the documentation says https://www.w3.org/TR/2011/WD-html-markup-20110405/input.date.html )

Unfortunately its up to the browser how to handle such tag and if they handle it at all. In chrome I think they use the format of the system locale. For other browsers I am not sure. The safest way would be to use some kind of date picker where you can select the date format and be sure it works on all browsers/clients.

I believe it is not supported in IE10 and I just tested on my firefox ESR version and it is not working either so for now I would wait with input type="date"