Format date in <f:selectItem(s) itemLabel> using DateTimeConverter

Question

I have a <h:selectOneMenu> that has <f:selectItems> with CategoryHistory objects loaded in it. I only show the Date date field as itemLabel. That works but I want to format the date: I created a converter that extends javax.faces.convert.DateTimeConverter and change the fields in the constructor. But my dates only show in default format :(

DateAndTimeConverter.java

import javax.faces.bean.ManagedBean;
import javax.faces.convert.Converter;
import javax.faces.convert.DateTimeConverter;
import javax.faces.convert.FacesConverter;

@FacesConverter(value = "dateAndTimeconverter")
@ManagedBean
public class DateAndTimeConverter extends DateTimeConverter implements Converter {

 public DateAndTimeConverter(){  
  this.setDateStyle("short");
 }

xhtml

 <h:selectOneMenu valueChangeListener="#{admin.categoryHistoryListener}"
    onchange="submit()" value="#{admin.categoryHistory.id}" converter="#{dateAndTimeconverter}">       
  <f:selectItems value="#{admin.categoryHistories}" var="n"
     itemValue="#{n.id}" itemLabel="#{n.date}">
  </f:selectItems>
 </h:selectOneMenu>

It also doesn't work when I try:

<h:selectOneMenu valueChangeListener="#{admin.categoryHistoryListener}"
    onchange="submit()" value="#{admin.categoryHistory.id}">
  <f:converter converterId="dateAndTimeconverter"/>       
  <f:selectItems value="#{admin.categoryHistories}" var="n"
     itemValue="#{n.id}" itemLabel="#{n.date}">
  </f:selectItems>
</h:selectOneMenu>

CategoryHistory Has a Date date, and Long id +...

Thank you

Answer 1

Unfortunately, the JSF converters only applies on the input value, not on the input label.

You'll need to solve this other ways. E.g. a getter which uses SimpleDateFormat to format the date. Or if your environment supports EL 2.2, simply invoke the converter method directly (you've it as managed bean already):

<f:selectItems value="#{admin.categoryHistories}" var="n" itemValue="#{n.id}" 
    itemLabel="#{dateAndTimeconverter.getAsString(facesContext, component, n.date)}">

If you happen to use JSF utility library OmniFaces, then you can also use its of:formatDate() function. E.g.:

<f:selectItems value="#{admin.categoryHistories}" var="n" itemValue="#{n.id}" 
    itemLabel="#{of:formatDate(n.date, 'd MMM yyyy')}">

Answer 2

You can use a converter method in your bean, as:

public class Admin{
    ...
        public String formatDate(Date fecha, String pattern) {
            return (new SimpleDateFormat(pattern)).format(fecha);
        }
    ...
}

And, in your xhtml page inside f:selectItems:

<f:selectItems value="#{admin.categoryHistories}" var="n"
               itemValue="#{n.id}" itemLabel="#{admin.formatDate(n.date,'d MMM yyyy')}">
</f:selectItems>

Answer 3

Example

xhtml

<h:selectOneMenu value="#{tbMonitoreoController.fechaMonitoreo}">
<f:selectItems value="#{tbMonitoreoController.fechasMonitoreo}" />

Method in tbMonitoreoController

public SelectItem[] getFechasMonitoreo(){
    Collection<Date> entities = getEjbFacade().getFechasMonitoreo();
    return JsfUtil.getSelectItemsFechasMonitoreo(entities, true);
}

public static SelectItem[] getSelectItemsFechasMonitoreo(Collection<Date> listDate, boolean selectOne) {
    int size = selectOne ? (listDate.size() + 1) : listDate.size();
    SelectItem[] items = new SelectItem[size];
    int i = 0;

    if (selectOne) {
        items[0] = new SelectItem(null, "---");
        i++;
    }
    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("dd/MM/yyyy");
    for (Date x : listDate) {
        items[i++] = new SelectItem(x, simpleDateFormat.format(x));
    }
    return items;
}