View Full Version : DateTimeField

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({
html: html
}, null, true);
var tds = Ext.DomQuery.select("div > div", tbl);
// Don't submit the splitted date/time fields

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");
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,
format:"Y-m-d", width: 150
} ,
format:"H:i", width: 150



UPDATE: screenshot added.

16 Dec 2007, 3:02 AM

Live example or screenshot!!

Thanks in advance,

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


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

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

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.

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;


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