DateItem behavior change between 8.3 and 9.0

[ESherbakova]

Hi,

We observe a behavior change for DateItem between 8.3 and 9.0: if a DateItem with text field and picker has the time portion displayed, in 8.3 the default time after choosing from the picker is 00:00 while in 9.0 it is 12:00. We are using v8.3p_2013-09-01 build and v9.0p_2013-12-02 build. This issue can be reproduced on both IE and FF.

BTW, We notice that in "isc_DateItem_pickerDataChanged", if the DateItem does not use logical dates, in 8.3 the method "isc_FormItem_setToZeroTime" is called but in 9.0 it is not called. We are wondering if missing this piece of code causes the behavior change.

Please try the following code to reproduce.
Steps:
1. Click the date picker icon.
2. Choose any date from the picker.
3. In 8.3 the time portion displayed in the text field is 00:00 but in 9.0 it is 12:00

isc.DynamicForm.create({
    ID: "dateForm",
    numCols: 2,    
    width: 600,
    top: 10,
    fields: [
        {title:"Date Field", _constructor:"DateItem", useTextField:true, dateFormatter: "toUSShortDatetime"}
    ]
});

[Isomorphic]

In 9.0, if you have a "datetime" type field, and you show a DateItem for it, the time should be actually customizable by the user via UI on the date chooser.

This is visible if you tweak your example to have a field of type "datetime":

isc.DynamicForm.create({
    ID: "dateForm",
    numCols: 2,    
    width: 600,
    top: 10,
    fields: [
        {title:"Date Field", type:"datetime", _constructor:"DateItem", useTextField:true, dateFormatter: "toUSShortDatetime"}
    ]
});

Clearly we don't want to reset the time portion of the selected value to zero if the user has chosen a time.
For "date" type fields, the user is working with what we call "logical dates". These are represented as a JavaScript Date object, but really refer to a calendar date (an entire day), rather than a specific time on a date. The "time" portion of such an object has no real meaning to the user or to application code -- we use noon to avoid various tricky edge cases around timezones which were causing the date to display incorrectly in certain cases.

Hopefully this helps clarify things!

Regards

Isomorphic Software

[ESherbakova]

Thanks for the explanation. We understand the conditions you mentioned. Now we consider using the "datetime" instead of date.

However, for backward compatibility, is there any way we can do to set the time portion of the selected value to zero if the current value of the datetime field is null and the user chooses a date directly by clicking any dates or "today" on the date picker?

Please try the following code using "datetime".
What we want to achieve is: when the value of the current field is null, after user select a date from the picker or just click today, the time portion is 00:00 instead of current time. Thanks!

isc.DynamicForm.create({
    ID: "dateForm",
    numCols: 4,    
    width: 600,
    fields: [
        {name:"directInputDate", title:"Direct Input Date", type:"datetime", useTextField:true, pickerTimeItemProperties: {showSecondItem: true}}
    ]
});

[Isomorphic]

You can resolve this by supplying an explicit "defaultChooserDate" (Either as a static attribute or via an override to getDefaultChooserDate) with zero time:

isc.DynamicForm.create({
    ID: "dateForm",
    numCols: 4,    
    width: 600,
    fields: [
        {name:"directInputDate", title:"Direct Input Date",
         type:"datetime", useTextField:true,
         getDefaultChooserDate:function () {
             var date = new Date();
             date.setHours(0);
             date.setMinutes(0);
             date.setSeconds(0);
             return date;
         },
         pickerTimeItemProperties: {showSecondItem: true}}
    ]
});

Note: If a the item has an explicit value, that will be shown in the chooser (both date and time portion) by default, so this is really for dealing with what is shown by default when the user opens the chooser on an empty datetime type item.

Regards
Isomorphic Software

[ESherbakova]

Thanks for the suggestion.

We have some questions related to the newly implement "datetime" type.

1. We are using the "_constructor" property to set the type of the FormItem. We notice that "_constructor: 'DateTimeItem'" behaves different from "type:'datetime'". By using the "type" property, the date picker contains the time portion but using the "_constructor" property, it just shows a regular date picker.

2. Is there any documentation describing how to use the "datetime" type? Do you have any examples for it?

Thanks!

[Isomorphic]

The "type" of a field refers to the data type (this is most obvious when you are working with DataSources of course).
If "type" is specified on a field, a particular FormItem subclass is used by default to be appropriate for the data type - for example a DateItem for editing fields of type "date".

You can override this and specify an explicit formItem subclass to use (including your own class defined in your application) by specifying either "editorType" or "_constructor" on the form item configuration object passed to form.fields.

The DateItem is designed to be able to edit either "date" or "datetime" type data. DateTimeItem is a very simple subclass of DateItem which has properties set to make it more suitable for editing "datetime" data - including having its formatter set to show the time as well as the date.
The fact that a DateTimeItem will not show the "time" item in the picker unless "type" is explicitly set to "datetime" is actually something of an oversight, which we will remedy.

The best documentation overview we have for working with dates and datetimes is here.

[ESherbakova]

Hi,

There's another behavior change we found between 8.3 and 9.0.

We have a type of display format for date field that the Year/Month/Day are separated by space. The space will be automatically generated by DateItem.inputFormat and we store the string value in a field of the dateItem (for example, if the display format is "dd MM yy", when user finishes typing "12", the value of the date field we set is "12 " and "12 " is stored in dateItem.cwCurrentStringFormat). Then we retrieve value and set it as the displayed value of the DateItem in DateItem.dateFormatter.

In 8.3 the space is included in the display value but in 9.0 it is trimmed. We notice that in 9.0 the value is trimmed in Date_parseInt before it was passed into the inputFormat function so the value we store and displayed is the trimmed one instead of the one with the space.

Please try the following simplified example. In 8.3 the value is "12 " but in 9.0 the value is "12" (without space)

var convertInputToDate = function(string, element) {element.cwCurrentStringFormat = string; return new Date(-1);};
var convertDateFormat = function(value, element) {return element.cwCurrentStringFormat;}

isc.DynamicForm.create({
    ID: "dateForm",
    numCols: 4,    
    width: 600,
    fields: [
        {ID:"dateField", name:"directInputDate", title:"Direct Input Date", _constructor: "DateItem", useTextField:true, textAlign: "left", 
         init: function() {var dateItem = this; this.dateFormatter = function() {return convertDateFormat(this, dateItem);}; 
         this.inputFormat = function(string) {return convertInputToDate(string, dateItem);};
         this.Super("init", arguments);}
        }
    ]
});

isc.Label.create({
ID: "forDisplay",
top:100,
contents: "" 
})

var inputValue = "12 ";
dateField.setValue(inputValue);
var value = "Value is \""+dateField.textField.getValue()+"\"";
forDisplay.setContents(value);

[Isomorphic]

We don't entirely follow your usage but we agree that your custom parser function should be passed the string with any space at the end intact.
We've made a change to reinstate this behavior. Please try the next nightly build dated Dec 12 or above

Regards
Isomorphic Software

[ESherbakova]

Thanks for the fix. We tried 12-13 build, both issues are resovled!

[acarur01]

Had a question related to the getDefaultChooserDate workaround - You mentioned that if there is already a value in the date field prior to clicking on the picker, that time portion would be used to display in the time dropdowns. And I have noticed that value is also used when the user clicks on the Today button...Is there any way to default the time to 00:00 when that button is clicked?

[Isomorphic]

Detecting that specifically the Today button was clicked would require a pretty hackish approach of using the AutoChild system to do something like sneak a mouseDown handler in the dataChooser.todayButton so you could set a timer to get rid of the time portion of the value...

Are you sure this is the right thing, usability-wise, in your application? It doesn't seem like hitting the Today button clearly indicates the user wants to discard the current time value. The reverse might be more common.

[acarur01]

it is actually more of a backward compatibility issue for us out users are used to seeing 00:00 when they click the today date.. I found Datechooser that has todayButtonclick but as soon as I add logic to return today's date with 00:00:00, the picker does not hide

[Isomorphic]

Well, your application changed from having the time neither displayed nor editable in the DateChooser to have it editable there. It seems like user expectations might change along with that?

If entering Today with a zero time is especially useful in your application, you could always have a FormItemIcon that does it directly.

As far as an override of todayClick, we're not sure what you mean when you say you "return" today's date, but todayClick doesn't not have a return value, and you would have to hide() the DateChooser explicitly if you replace this function since that's one of the things it does.

[acarur01]

Yes, it was a bit of a hack - before the control was available, the users would click on the Today button and in the date field, it would display todaydate + 00:00 automatically (this is in line with the display format that was being used for a date field).

-- in other words, I shouldn't use todayClick.. can you elbarote on the formItemIcon?

[Isomorphic]

Not sure what you mean about elaborating on FormItemIcon. That's covered extensively in the docs - FormItemIcon is what you specify in formItem.icons.