[new version] DateTime Field

[shiv]

yes, your example does work in FF2/Mac. That's why I think my problem is caused by the way i'm implementing the EditorGrid (because the DateTime field does work for me when it's part of a Form). I'm creating the EditorGrid like so:

    myGrid = new Ext.grid.EditorGridPanel({
        title: 'Guests (general)',
        store: mainDataStore, colModel: myColumnModel,
        enableColumnHide: true, enableColumnMove: true, clicksToEdit: 2,
        autoWidth: true, autoHeight: true,
        plain: true, layout: 'fit', closable: false, renderTo: 'gridArea',
        viewConfig: {forceFit: true}, plugins: [ RowExpander ],
        selModel: new Ext.grid.RowSelectionModel( {singleSelect: false} ),
        autoExpandColumn: 'guestName',
        tbar: [
            {text: 'Add new guest', iconCls: 'addButton', handler: displayFormWindow},
            {text: 'Delete selected', iconCls: 'deleteButton', handler: confirmDelete}
        ],
        bbar: []
    });
    myGrid.on( 'afteredit', saveTheGuest );

the column model is defined like so (before defining the grid):

      var myColumnModel = new Ext.grid.ColumnModel([
        RowExpander,
        {header: 'Name', dataIndex: 'guestName', id: 'guestName', width: 100, hideable: false, editor: new Ext.form.TextField( {allowBlank: false, maxLength: 60} )},
        {header: 'Email', dataIndex: 'emailAddress', id: 'emailAddress', width: 100, sortable: false, hidden: true, editor: new Ext.form.TextField( {maxLength: 60} )},
         {header: 'Arr time', dataIndex: 'arrTime', width: 75, renderer: formatShortDateTime, editor: new Ext.ux.form.DateTime( {id: 'arrTime', timeWidth: 75} )},
        {header: 'Arr airport', dataIndex: 'arrAirport', width: 75, hidden: true, editor: new Ext.form.TextField( {maxLength: 10} )},
        {header: 'Dep time', dataIndex: 'depTime', width: 75, renderer: formatShortDateTime, editor: new Ext.ux.form.DateTime( {id: 'depTime', timeWidth: 75} )},
        {header: 'Dep airport', dataIndex: 'depAirport', width: 75, hidden: true, editor: new Ext.form.TextField( {maxLength: 10} )},
        {header: 'Notes', dataIndex: 'notes', id: 'notes', width: 100, sortable: false, editor: new Ext.form.TextArea( {grow: true, maxLength: 255} )}
    ]);
    myColumnModel.defaultSortable = true;

the reason I'm splitting these up is that I have several separate but similar pages that show different "guest" columns by default. It's easier for me to reuse the grid code and simply modify the columnModel for different "views".

Worst-case scenario is that I require all my users to upgrade to Firefox 3! If I can't figure this out, that's what happens.

[jsakalos]

autoWidth and autoHeight are mutually exclusive with layout:'fit' - they are ignored at best. I do not see any other obvious mistake.

[seethrubob]

I think we found a bug in the widget that will only occur a few times a year.

The updateDate function calls initDateValue which sets the dateValue to the current date and time. The function then overwrites the year, month and date with the values supplied from the date field.

if(!(this.dateValue instanceof Date)) {
   this.initDateValue();
   if(!this.tf.getValue()) {
      this.setTime(this.dateValue);
   }
}
this.dateValue.setMonth(0); // because of leap years
this.dateValue.setFullYear(d.getFullYear());
this.dateValue.setMonth(d.getMonth());
this.dateValue.setDate(d.getDate());

What happened was the current date/time was 10/31/2008 12:00:00 and we selected an early September date from the calendar. The setFullYear worked fine. The date selected in the widget was in September, since September doesn't have 31 days when setMonth was called the dateValue ended up being set to 10/01/2008 ie. the 31st day of September. Then the setDate worked as expected. So the end result was the internal dateValue was a month ahead of what we selected, although the date we selected displayed properly in the date field.

I can see numerous ways to fix this but went with changing:

this.dateValue.setMonth(d.getMonth());
this.dateValue.setDate(d.getDate());

to:

this.dateValue.setMonth(d.getMonth(), d.getDate());

[jsakalos]

Thank you for finding the bug and providing the patch.

[dekely]

Hi,

When I use this component in a grid, all I see is a time dropdown.
where is the calendar?

thanks in advance,

var actionlog_datetime = new Ext.ux.form.DateTime({ id:'actionlog_datetime', name:'actionlog_datetime', fieldLabel:'Date & Time', timeFormat:'H:i', timeConfig: { altFormats:'H:i', allowBlank:true }, dateFormat:'d.m.Y',dateConfig: { altFormats:'d.m.Y', allowBlank:true } });
 
{
header: 
'Arr time', dataIndex: 'arrTime', editor: actionlog_datetime

}

[jsakalos]

Try to set timePosition:'below' or widen the column

[dekely]

Solved!
It was a layout issue

thanks

[dekely]

Hi,

How do I limit a maximum and a minimum date+time ?

thanks

[dekely]

dueDateEditor.df.maxValue =

new Date();

dueDateEditor.df.minValue = new Date();

[dekely]

Hi,

The validation is done for each field individually and not to the whole value
My schenario:
I need to limit the component to a future date
If the date is tomorrow (which is ok) but the time is earlier today than the time field is invalid.

Is it possible to perform validation to the whole value ? (date+time)

thanks in advance