Announcement

**Isomorphic** · 12 Sep 2018, 03:41

Your example is kind of incomplete, so it isn't obvious why you might be installing only one displayFormatter (for short datetimes) and not the others, but your solution is to also install a parser for that custom format, so the system can map the custom display string back into a valid date.

This will do it:

Code:

        DateUtil.setDateParser(new DateParser() {
            public Date parse(String dateString) {
                DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
                final DateTimeFormat format = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay());
                Date date = format.parse(dateString);
                return date;
            }
        });

Note that any such global formatters and parsers should be installed at top of your app, before anything that might use date-formats gets initialized.

**pavo123** · 12 Sep 2018, 04:07

Hi Isomorphic,

thank you very much. Your solution solved my problem.
This code is already installed at top of app, but thanks for tip!

Regards, Pavo

**pavo123** · 13 Sep 2018, 23:58

Hi Isomorphic,

my problem with filter is solved but now I have a new bigger problem.
All my DateItem fields are not working any more.

I'm getting this exception:

Code:

09:35:49.885:MUP4:WARN:Log:Uncaught JavaScript exception: TypeError: this.form is null in http://lms.localhost:8080/lms/lms/sc/modules/ISC_Forms.js?isc_version=12.0p_2018-09-12.js, line 1084
09:36:03.899:MUP4:WARN:Log:TypeError: this.form is null
Stack from error.stack:
    FormItem.getDisplayFieldName() @ lms/sc/modules/ISC_Forms.js?isc_version=12.0p_2018-09-12.js:1084
    FormItem.getDisplayFieldType() @ lms/sc/modules/ISC_Forms.js?isc_version=12.0p_2018-09-12.js:1074
    FormItem._getDateFormatter() @ lms/sc/modules/ISC_Forms.js?isc_version=12.0p_2018-09-12.js:1069
    DateItem.formatDate() @ lms/sc/modules/ISC_Forms.js?isc_version=12.0p_2018-09-12.js:2492
    DateItem.pickerDataChanged() @ lms/sc/modules/ISC_Forms.js?isc_version=12.0p_2018-09-12.js:2503
    anonymous() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:85
    thunk() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:358
    observation() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:354
    DateChooser.dateClick() @ lms/sc/modules/ISC_Forms.js?isc_version=12.0p_2018-09-12.js:151
    isc.A.dateGridDefaults.dateClick() @ lms/sc/modules/ISC_Forms.js?isc_version=12.0p_2018-09-12.js:101
    DateGrid.cellClick() @ lms/sc/modules/ISC_Forms.js?isc_version=12.0p_2018-09-12.js:84
    anonymous() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:85
    GridRenderer._cellClick() @ lms/sc/modules/ISC_Grids.js?isc_version=12.0p_2018-09-12.js:572
    GridRenderer._rowClick() @ lms/sc/modules/ISC_Grids.js?isc_version=12.0p_2018-09-12.js:570
    Class.invokeSuper() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:314
    Class.Super() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:306
    GridBody._rowClick() @ lms/sc/modules/ISC_Grids.js?isc_version=12.0p_2018-09-12.js:639
    GridRenderer.click() @ lms/sc/modules/ISC_Grids.js?isc_version=12.0p_2018-09-12.js:568
    Canvas.handleClick() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:3499
    [c]EventHandler.bubbleEvent() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:2135
    [c]EventHandler.handleClick() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:1975
    EventHandler._handleMouseUp() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:1960
    [c]EventHandler.handleMouseUp() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:1951
    [c]EventHandler.dispatch() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:2222
    anonymous() @ lms/sc/modules/ISC_Core.js?isc_version=12.0p_2018-09-12.js:84

I've created a test case where you can see that DateItem fields are not working (but I'm not getting the exception).

Code:

package com.smartgwt.sample.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.LocaleInfo;
import com.google.gwt.i18n.shared.DateTimeFormat;
import com.google.gwt.i18n.shared.DateTimeFormatInfo;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.DateDisplayFormatter;
import com.smartgwt.client.util.DateParser;
import com.smartgwt.client.util.DateUtil;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.DateItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        DateUtil.setShortDatetimeDisplayFormatter(new DateDisplayFormatter() {
            public String format(Date date) {
                if (date == null)
                    return null;
                DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
                final DateTimeFormat dateFormatter = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay());
                String format = dateFormatter.format(date);
                return format;
            }
        });

        DateUtil.setDateParser(new DateParser() {
            public Date parse(String dateString) {
                DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
                final DateTimeFormat format = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay());
                Date date = format.parse(dateString);
                return date;
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new MyWindow().show();
            }
        });
        addMember(recreateBtn);
        new MyWindow().show();
        draw();
    }

    private class MyWindow extends Window {

        public MyWindow() {

            setWidth(800);
            setHeight(600);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            SC.logWarn(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            TestVL testVL = new TestVL();

            addItem(testVL);
        }

        private class TestVL extends VLayout {
            public TestVL() {

                final DynamicForm df = new DynamicForm();
                DateItem di = new DateItem("nextShipment");
                di.setOptionDataSource("supplyItem");
                di.setRequired(true);
                di.setUseTextField(true);

                df.setFields(di);

                setMembers(df);
            }
        }
    }
}

Without using the code you suggested in post #2, DateItem fields are working but the filter doesn't work (problem from post #1).

Best regards
Pavo

**Isomorphic** · 14 Sep 2018, 00:38

It's probably worth taking a step back and describing what you're actually trying to do.

Are you trying to set a global format for dates throughout the app? In which case, you need to install the other formatters as we noted previously

If you want to set a format just for a particular item, or just for all DateItems, install local formatters on DateItem - or create a DateItem subclass with the appropriate settings and reuse it as required in your app.

Specifically, to make this latest attempt work as-is, you need a call to setShortDateDisplayFormatter(), as well as setShortDatetimeDisplayFormatter(), because the data-type of this field is "date" and not "datetime".

**Blama** · 14 Sep 2018, 02:06

Hi Isomorphic,

the use case is the following:

Datacentric application with not too much horizontal space
Display of dates in ListGrid application wide with the code from #4 (OK now)
CREATED_AT and MODIFIED_AT fields of type creatorTimestamp / modifierTimestamp
Hovers with more detailed information using this code:

Code:

package com.lmscompany.lms.client.ui.listgridfield;

import java.util.Date;

import com.google.gwt.i18n.client.LocaleInfo;
import com.google.gwt.i18n.shared.DateTimeFormat;
import com.google.gwt.i18n.shared.DateTimeFormatInfo;
import com.google.gwt.user.datepicker.client.CalendarUtil;
import com.lmscompany.lms.client.i18n.I18nEdited;
import com.lmscompany.lms.client.util.Helper;
import com.smartgwt.client.widgets.grid.CellFormatter;
import com.smartgwt.client.widgets.grid.HoverCustomizer;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;

/**
 * Shows you date and time without seconds in format DD/MM/YYYY HH:MM, and with seconds in this format: YYYY-MM-DD HH:MM:SS Also with mouse hover and
 * you can extra see how long time past since then
 */
public class ListGridFieldDateTimeHover extends ListGridField {
    public ListGridFieldDateTimeHover(final String name, boolean showTime) {
        this(name, showTime, false, false);
    }

    public ListGridFieldDateTimeHover(final String name, boolean showTime, final boolean showSeconds) {
        this(name, showTime, showSeconds, false);
    }

    public ListGridFieldDateTimeHover(final String name, final boolean showTime, final boolean showSeconds, final boolean truncateSeconds) {
        super(name);

        final DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();

        if (showTime) {
            setCellFormatter(new CellFormatter() {
                @Override
                public String format(Object value, ListGridRecord record, int rowNum, int colNum) {
                    Date d = record.getAttributeAsDate(name);
                    final DateTimeFormat dateFormatter;
                    if (showSeconds)
                        dateFormatter = DateTimeFormat.getFormat(ddtfi.formatYearMonthNumDay() + " " + ddtfi.formatHour24MinuteSecond());
                    else
                        dateFormatter = DateTimeFormat.getFormat(ddtfi.formatYearMonthNumDay() + " " + ddtfi.formatHour24Minute());
                    String retVal = (d == null) ? null : dateFormatter.format((Date) d);
                    return retVal;
                }
            });
        }

        setShowHover(true);
        setHoverWidth(200);
        if (showSeconds)
            setWidth(120);
        else
            setWidth(110);
        setHoverCustomizer(new HoverCustomizer() {
            @Override
            public String hoverHTML(Object value, ListGridRecord record, int rowNum, int colNum) {
                Date d = record.getAttributeAsDate(name);
                final DateTimeFormat dateFormatter;
                if (truncateSeconds)
                    dateFormatter = DateTimeFormat.getFormat(ddtfi.formatYearMonthFullDay());
                else
                    dateFormatter = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay() + " " + ddtfi.timeFormatMedium());

                String retVal = (d == null) ? null : dateFormatter.format((Date) d);
                if (retVal != null) {
                    if (truncateSeconds) {
                        Date todayMidnight = new Date();
                        CalendarUtil.resetTime(todayMidnight);
                        retVal += " " + ("(" + calculateDateDifference(d, todayMidnight) + ")").replace(" ", "&amp;nbsp");
                    } else
                        retVal += " " + ("(" + calculateDateDifference(d, new Date()) + ")").replace(" ", "&amp;nbsp");
                }
                return retVal;
            }
        });
    }

    private static String calculateDateDifference(Date start, Date end) {// Fast return
        if (start == null || end == null)
            return "";
        long currentVal = new Double(Math.floor(Math.abs(end.getTime() - start.getTime()) / 1000)).longValue();

        boolean isPast = end.getTime() &gt; start.getTime();
        return (isPast ? I18nEdited.passedSince() : I18nEdited.untilThen()) + ": " + Helper.formatDateDifference(currentVal);
    }
}

This results in this display:

Filtering does look like this:

As you can see, you can select the time, but it is not displayed.
Both possible solutions:

No time entry
Time entry and display of selected time would be OK

How would you solve either case?

Thank you & Best regards
Blama

**Isomorphic** · 14 Sep 2018, 02:10

Did you not include the first image?

**Blama** · 14 Sep 2018, 02:14

There should be one png-image and one gif-video. I can see both.
Here is the image again:

**Isomorphic** · 15 Sep 2018, 00:11

Thanks - for clarity, are you saying that issues from earlier in the thread are now resolved, and the remaining issue is that the pickers in the dateRangeItem (the RelativeDateItems there) allow you to choose a time, but the items then don't show the time portion?

**Blama** · 16 Sep 2018, 05:21

Hi Isomorphic,

that is correct.

Best regards
Blama

**Isomorphic** · 16 Sep 2018, 23:15

If you're using the exact date parser we provided earlier, then you just need to change it so it deals with parsing a format that includes the time. - in testing, we used "MMM dd, yyyy hh:mm" to format dateTimes and just "MMM dd, yyyy" for dates, and then the former for the parser, which will deal with either.

Announcement

Filter for "creatorTimestamp" and "datetime" field type not working

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment