RelativeDateItem Shows Different Dates in Picker and Label

[bwilkins30]

SmartClient Version: v8.3p_2013-01-22/LGPL Development Only (built 2013-01-22)

FF 17.0.3 ESR

GWT 2.5

Windows 7

Executed test in FF 17.0.3 ESR browser itself
---

Using RelativeDateItem, if I select say 19-Feb-13 as my date, it shows 19.Feb.2013 24:00 in the picker. However, in the label to the right of the component, it says 20.Feb.2013 24:00. See attached for screenshot.

I am formatting my date in a special manner. Is my date formatting causing this inconsistency?

private void changeDateFormat()
   {
      DateUtil.setShortDatetimeDisplayFormatter(new DateDisplayFormatter()
      {
         public String format(Date date)
         {
            if(date == null)
            {
               return null;
            }
            else
            {
               final DateTimeFormat dateFormatter = DateTimeFormat.getFormat(DATE_FORMAT);
               return dateFormatter.format(date);
            }

         }
      });

      // It is a requirement that we implement a custom date parser or the onChanged event
      // will not fire.

      DateUtil.setDateParser(new DateParser()
      {
         public Date parse(String dateString)
         {
            final DateTimeFormat format = DateTimeFormat.getFormat(DATE_FORMAT);
            return format.parse(dateString);
         }
      });
   }

[Isomorphic]

It could, if you are, for example, trying to switch the system-wide formats on the fly. System-wide formats must be set before any components are created and cannot be changed later.

[bwilkins30]

It could, if you are, for example, trying to switch the system-wide formats on the fly. System-wide formats must be set before any components are created and cannot be changed later.

Format is changed before any of the components are created. It only seems to happen at midnight. Any other time is formatted and updated fine in both widgets. I set a normal display formatter, but that had no effect.

[Isomorphic]

Can you show a complete runnable example? Exactly how the date value is created and passed to the component is important, and other details may be as well.

If it doesn't require a custom formatter/parser pair to reproduce, please omit those.

[bwilkins30]

Can you show a complete runnable example? Exactly how the date value is created and passed to the component is important, and other details may be as well.

If it doesn't require a custom formatter/parser pair to reproduce, please omit those.

To reproduce:

1. Click the Calendar icon for the Start date picker
2. Select February 19th, 2013
3. Note the different in the picker and the adjacent label

Caveat: Removing the custom formatting does not cause this problem to exhibit itself.

package com.corp.smartgwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.util.DateUtil;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.form.fields.RelativeDateItem;
import com.smartgwt.client.util.DateDisplayFormatter;
import com.smartgwt.client.util.DateParser;
import com.smartgwt.client.data.RelativeDate;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.TimeUnit;
import com.smartgwt.client.widgets.form.fields.events.ChangedEvent;
import com.smartgwt.client.widgets.form.fields.events.ChangedHandler;
import java.util.Date;

public class SmartGwt implements EntryPoint {

	private RelativeDateItem theStartDateItem;
	private RelativeDateItem theEndDateItem;
	private static String DATE_FORMAT = "dd.MMM.yyyy kk:mm";
	
  @Override
  public void onModuleLoad() {
    HLayout layout = new HLayout();
    DynamicForm form = new DynamicForm();
    form.setFields(getStartDateItem(), getEndDateItem());
    layout.addMember(form);
    layout.draw();
  }
  
  private void changeDateFormat()
  {      
     DateUtil.setShortDatetimeDisplayFormatter(new DateDisplayFormatter()
     {
        public String format(Date date)
        {
           if(date == null)
           {
              return null;
           }
           else
           {
              final DateTimeFormat dateFormatter = DateTimeFormat.getFormat(DATE_FORMAT);
              return dateFormatter.format(date);
           }

        }
     });

     // It is a requirement that we implement a custom date parser or the onChanged event
     // will not fire.
     
     DateUtil.setDateParser(new DateParser()
     {
        public Date parse(String dateString)
        {           
           final DateTimeFormat format = DateTimeFormat.getFormat(DATE_FORMAT);
           
           return format.parse(dateString);
                      
        }
     });
  }
  
  private RelativeDateItem getStartDateItem()
  {
     if (theStartDateItem == null)
     {
        changeDateFormat();

        theStartDateItem = new RelativeDateItem("start_date");
        theStartDateItem.setTitle("Start");
        theStartDateItem.setShowFutureOptions(false);
        theStartDateItem.setShowPastOptions(true);
        
        // By setting this to essentially a blank LinkedHashMap, it will clear out the preset
        // options we do not want.
        // theStartDateItem.setPresetOptions(new LinkedHashMap());
        
        theStartDateItem.setTimeUnitOptions(getTimeOptions());
        theStartDateItem.setDefaultQuantity(1);        

        theStartDateItem.setOverflow(Overflow.VISIBLE);        
        
        theStartDateItem.addChangedHandler(new ChangedHandler()
        {
           @Override
           public void onChanged(ChangedEvent event)
           {
              SC.logWarn("Start Date Changed!");
              // Test if this is a relative date selection so we can save it that way
              RelativeDate relDate = theStartDateItem.getRelativeDate();
              
              Date startDate = (Date)theStartDateItem.getValue();
              Date endDate = (Date)getEndDateItem().getValue();

              SC.logWarn(startDate.toString());
              
              // Per the JavaDoc, compareTo returns less than 0 if the date is before the compared
              // date. So in this case, if the endDate is before the startDate, then we show
              // the error. No changes will be made to the model until the error is cleared.
              if (endDate.compareTo(startDate) < 0)
              {
                 getEndDateItem().getForm()
                               .setFieldErrors("end_date", "invalid date", true);
              }               
              else
              {                  
                 getEndDateItem().getForm()
                                 .clearFieldErrors("end_date", true);
               
                 if (relDate != null)
                 {
                    SC.logWarn("Start Relative Date: " + relDate.getValue());
                 }
              }
           }
        });

        // 
     }

     return theStartDateItem;
  }

  /**
   * This will return an array of SmartGWT TimeUnit options that we want to add to our drop-down
   * for the Start and End date RelativeDateItem's
   *
   * @return array of TimeUnit's
   */
  private TimeUnit[] getTimeOptions()
  {
      TimeUnit[] units = new TimeUnit[5];

      units[0] = TimeUnit.HOUR;
      units[1] = TimeUnit.DAY;
      units[2] = TimeUnit.WEEK;
      units[3] = TimeUnit.MONTH;
      units[4] = TimeUnit.YEAR;

      return units;
  }

  /**
   * This will initialize and construct the end RelativeDateItem
   * @return Ending RelativeDateItem
   */
  private RelativeDateItem getEndDateItem()
  {
     if (theEndDateItem == null)
     {
        changeDateFormat();
        
        theEndDateItem = new RelativeDateItem("end_date");
        theEndDateItem.setTitle("End:");         

        // By setting this to essentially a blank LinkedHashMap, it will clear out the preset
        // options we do not want.
        // theEndDateItem.setPresetOptions(new LinkedHashMap());
        
        theEndDateItem.setOverflow(Overflow.VISIBLE);
        theEndDateItem.setShowFutureOptions(false);
        theEndDateItem.setShowPastOptions(true);
        theEndDateItem.setTimeUnitOptions(getTimeOptions());
        theEndDateItem.setDefaultQuantity(1);

        theEndDateItem.addChangedHandler(new ChangedHandler()
        {
           @Override
           public void onChanged(ChangedEvent event)
           {
              SC.logWarn("End date item changed!");
              // Test if this is a relative date selection so we can save it that way
              RelativeDate relDate = theEndDateItem.getRelativeDate();
              
              Date startDate = (Date)getStartDateItem().getValue();
              Date endDate = (Date)theEndDateItem.getValue();

              // Per the JavaDoc, compareTo returns less than 0 if the date is before the compared
              // date. So in this case, if the endDate is before the startDate, then we show
              // the error.
              if (endDate.compareTo(startDate) < 0)
              {
                 theEndDateItem.getForm()
                               .setFieldErrors("end_date", "invalid date", true);
              }
              else
              {
                 // Clear any errors on the field and save the changes to the model
                 theEndDateItem.getForm()
                               .clearFieldErrors("end_date", true);

                 if (relDate != null)
                 {
                    SC.logWarn("End Relative Date: " + relDate.getValue());
                 }                 
              }
           }
        });        
     }

     return theEndDateItem;
  }
}

[bwilkins30]

The issue is in the formatting code. I don't know yet why.

[Isomorphic]

How do you mean? Have you discovered that the underlying time value is the same, but the formatting code just seems to do a different thing with two identical dates?

[bwilkins30]

How do you mean? Have you discovered that the underlying time value is the same, but the formatting code just seems to do a different thing with two identical dates?

Yes, that's exactly it.

[bwilkins30]

As a followup, it seems the date format dd.MMM.yyyy kk:mm is unsymmetrical. Using the date format dd.MMM.yyyy HH:mm allows the date to format properly.

[bwilkins30]

It's a GWT bug by the way: http://gwt-code-reviews.appspot.com/1877805/

[Isomorphic]

Thanks for letting us know, this may well help other users in the future.