PDA

View Full Version : DateTimeField



berend
14 Dec 2007, 2:56 PM
Hi All,

Just created a DateTimeField based on code (http://extjs.com/forum/showthread.php?p=84716#post84716) posted by FritFrut (http://extjs.com/forum/member.php?u=1721). It works by combining DateField and TimeField on a single line.

Perhaps people find it useful. This one works in a form. Haven't tested a grid, but I think it works there as well. This should be copy and paste, containing all the code you need.


// Inject new function into TimeField class
Ext.form.TimeField.prototype.getDateTimeValue = function() {
var v = Ext.form.TimeField.superclass.getValue.call(this);
return this.parseDate(v) || '';
};

// Make sure these name spaces exist
Ext.namespace("Ext.ux", "Ext.ux.form");

// Define the HiddenField component
Ext.ux.form.HiddenField = function(){
Ext.ux.form.HiddenField.superclass.constructor.apply(this, arguments);
};

Ext.extend(Ext.ux.form.HiddenField, Ext.form.Field, {
/**
* @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "input", type: "hidden" })
*/
defaultAutoCreate : { tag: "input", type: 'hidden' },
inputType: 'xhidden'
});

// Define the DateTime component
Ext.ux.form.DateTimeField = function (config) {
Ext.ux.form.DateTimeField.superclass.constructor.call(this, config);

var dfConfig = {};
var tfConfig = {};
Ext.applyIf(dfConfig, config.dateFieldConfig || {autoCreate: {tag: "input", type:"text", size:"1", autocomplete: "off"}} );
Ext.applyIf(tfConfig, config.timeFieldConfig || {autoCreate: {tag: "input", type:"text", size:"1", autocomplete: "off"}} );

this.df = new Ext.form.DateField(dfConfig);
this.tf = new Ext.form.TimeField(tfConfig);

// Update the hidden field on exit of the invididual date and time fields
this.df.on("blur", this.updateHiddenField.createDelegate(this));
this.tf.on("blur", this.updateHiddenField.createDelegate(this));

this.value = null;
};

Ext.extend(Ext.ux.form.DateTimeField, Ext.ux.form.HiddenField, {

onRender: function (container, position) {
// We used xhidden else no label would be rendered by the layout
// manager, but set the real input type here as we need that input field
this.inputType = 'hidden';
Ext.ux.form.DateTimeField.superclass.onRender.call(this, container, position);

var df_width = this.df.initialConfig.width ? this.df.initialConfig.width : 100;
var tf_width = this.tf.initialConfig.width ? this.tf.initialConfig.width : 200;
var html ='<div><div style="float: left; margin-right: 10px; width: ' + String(df_width) + 'px"></div><div style="width: ' + String(tf_width) + 'px"></div></div>';

var tbl = this.el.insertSibling({
cls:"x-form-datetimefield",
html: html
}, null, true);
var tds = Ext.DomQuery.select("div > div", tbl);
this.df.render(tds[0]);
this.tf.render(tds[1]);
// Don't submit the splitted date/time fields
Ext.getDom(this.df.id).removeAttribute('name');
Ext.getDom(this.tf.id).removeAttribute('name');
},

setValue: function (value) {
// value must be in XML Schema dateTime format
// (same as Date.patterns.SortableDateTime)
if (value)
value = Date.parseDate (value, "Y-m-d\\TH:i:s");
this.df.setValue (value);
this.tf.setValue (value);
Ext.ux.form.DateTimeField.superclass.setValue.call (this, value);
},

getValue: function () {
// value is always set in XML Schema dateTime format
// (same as Date.patterns.SortableDateTime)
var dval = this.df.getValue ();
var tval = this.tf.getDateTimeValue ();
if (dval && tval)
this.value = dval.add (Date.HOUR, tval.getHours()).add(Date.MINUTE, tval.getMinutes());
if (this.value)
return this.value.format ("Y-m-d\\TH:i:s");
else
return null;
},

updateHiddenField : function() {
var value = this.getValue();
var hiddenField = Ext.get(this.id);
hiddenField.dom.value = value;
}

});

This might not be the best implementation, but unlike Jack (http://extjs.com/forum/showthread.php?p=58#post58), we poor application developers are not looking for something this is nice, but something that works.

I haven't tested client validation yet, so I probably will be making some improvements over the next few weeks, but I suppose this code should make some people's live easier.

One last thing, this class expects and returns datetimes in XML Schema format (http://www.w3.org/TR/xmlschema-2/#dateTime).

Example code:


dtfield = new Ext.ux.form.DateTimeField({
fieldLabel: 'Datetime',
name: 'dtf', width: 300, allowBlank:false,
dateFieldConfig:
{
format:"Y-m-d", width: 150
} ,
timeFieldConfig:
{
format:"H:i", width: 150
}
})

Screenshot:

http://www.pobox.com/~berend/extjs/datetimefield_example.png

UPDATE: screenshot added.

galdaka
16 Dec 2007, 3:02 AM
Hi,

Live example or screenshot!!

Thanks in advance,

berend
17 Dec 2007, 11:09 AM
Live example or screenshot

Screenshot.

daviscabral
19 Dec 2007, 2:11 AM
Did you will update this code to Ext 2.0?

Rowan
19 Dec 2007, 10:50 AM
This code will only work in 2.0 as there is no Time field in 1.1

berend
21 Dec 2007, 4:22 PM
This code will only work in 2.0 as there is no Time field in 1.1

Posted in wrong forum it seems, this should have been in the 2.0 forum.

tarini
22 Aug 2009, 2:53 PM
hi guys...
compliments for this useful plugin

I've added a useful configuration to set automatically width of dateField and timeField.

You can now set a total width and fields fits to 50% each (minus 10px spacing)

In my case I need this configuration because I'm working on a framework that sets width as attributes of single textField and I can't manage different configurations for each sub-fields

here's the code:



//line 33 inside contructor
if(config.autoWidth == true) {
dfConfig.width = (config.width-10) / 2;
tfConfig.width = (config.width-10) / 2;
}



usage:



{
xtype: 'datetimefield',
autoWidth: true,
width: 100,
dateFieldConfig: {
format: "..."
},
timeFieldConfig: {
format: "..."
}
}