How to custom date format on SelectItem?

Smart GWT Technical Q&A
1

I am not understanding how to customize the date formatting on a SelectItem. I have it partially working, with ListGrid for the pick list using a CellFormatter and com.google.gwt.i18n.client.DateTimeFormat, but the actual display (once picked) does not use the customization.

	public static final CellFormatter broadcastDayCellFormatter = new CellFormatter() {

		@Override
		public String format(Object value, ListGridRecord record, int rowNum, int colNum)
		{
			final DateTimeFormat dateFormatter = DateTimeFormat.getFormat("EEEE, MMMM d, y");
			return dateFormatter.format((Date) value);
		}
	};

	private DynamicForm buildDaySelectForm() 
	{
		final DynamicForm form = new DynamicForm();
		form.setWidth100();
		form.setTitleSuffix("");
		form.setNumCols(1);
		
		ListGridField dateField = new ListGridField("broadcast_date");
		dateField.setCellFormatter(broadcastDayCellFormatter);
		
		broadcastDaySelectItem = new SelectItem("broadcast_date", "Day");
		broadcastDaySelectItem.setShowTitle(false);
		broadcastDaySelectItem.setWidth("*");
		broadcastDaySelectItem.setDefaultToFirstOption(true);
		broadcastDaySelectItem.setRedrawOnChange(true);	
		broadcastDaySelectItem.setPickListFields(dateField);

		// code snipped...

		form.setFields(broadcastDaySelectItem);

		return form;
	}

In the pick list ListGrid, the date is formatted as I want it to be (e.g. Friday, June 17, 2011), how do I make the SelectItem show this format once the day is selected?

2

Use a ValueFormatter on the SelectItem itself. If you have a recent nightly build, there’s a sample for this under the ComboBox folder.

3

Thanks! That works great! For anyone curious, here is the refactored code:

	private class broadcastDayFormValueFormatter implements FormItemValueFormatter {

		@Override
		public String formatValue(Object value, Record record, DynamicForm form, FormItem item)
		{
			if (null == value) return null;
			final DateTimeFormat dateFormatter = DateTimeFormat.getFormat("EEEE, MMMM d, y");
			return dateFormatter.format((Date) value);
		}
 		
	};

	private DynamicForm buildDaySelectForm() 
	{
		final DynamicForm form = new DynamicForm();
		form.setWidth100();
		form.setTitleSuffix("");
		form.setNumCols(1);
		
		broadcastDaySelectItem = new SelectItem("broadcast_date", "Day");
		broadcastDaySelectItem.setShowTitle(false);
		broadcastDaySelectItem.setWidth("*");
		broadcastDaySelectItem.setDefaultToFirstOption(true);
		broadcastDaySelectItem.setRedrawOnChange(true);	
		broadcastDaySelectItem.setValueFormatter(new broadcastDayFormValueFormatter());


		// code snipped...

		form.setFields(broadcastDaySelectItem);

		return form;
	}