datetimefield for qooxdoo

DateTimeField

qx.Class.define("project.form.DateTimeField", 
{
	extend : qx.ui.form.DateField,
	
	construct : function()
	{
		this.base(arguments);
		
		this.setDateFormat( new qx.util.format.DateFormat("M/d/yy h:mma"));
	},
	
	properties : {
		appearance :
	    {
	      refine : true,
	      init   : "datetimefield"
	    }
	},
	
	members :
	{
		_createChildControlImpl : function(id)
		{
			var control;
			
			switch(id)
			{
				
				case "list":
		          control = new qx.ui.control.DateChooser();
		          control.setFocusable(false);
		          control.setKeepFocus(true);
		          //control.addListener("execute", this._onChangeDate, this);
		          break;
					
				case "timechooser":
					control = new yinzanalytics.control.TimeChooser();
					control.setFocusable(false);
					control.setKeepFocus(true);
					break;
					
				// case "done-button":
				// 	control = new qx.ui.form.Button("done");
				// 	control.setFocusable(false);
				// 	control.setKeepFocus(true);
				// 	control.addListener("click", this._onChangeDate, this);
				// 	break;
					
				case "popup":
					control = new qx.ui.popup.Popup(new qx.ui.layout.VBox());
					control.setAutoHide(false);
					control.add(this.getChildControl("list"));
					control.add(this.getChildControl("timechooser"));
					control.addListener("changeVisibility", this._onPopupChangeVisibility, this);
					break;
			}
			return control || this.base(arguments, id);
		},
		// overridden
	    _onPopupChangeVisibility : function(e)
	    {
			// Synchronize the chooser with the current value on every
			// opening of the popup. This is needed when the value has been
			// modified and not saved yet (e.g. no blur)
			var popup = this.getChildControl("popup");
			if (popup.isVisible())
			{
				//console.log('showing the calender and time chooser ');
				//console.log('update the choosers');
				
				var value = this.getValue();
				
				//set the time chooser
				var timeChooser = this.getChildControl("timechooser");
				timeChooser.setValueFromDate(value);

				//remove the minutes and hours from the date
				value = new Date( value.getTime() - ( value.getHours()*60*60 + value.getMinutes()*60 )*1000 );

				// set the date in the datechooser
				var dateChooser = this.getChildControl("list");
				dateChooser.setValue(value);
				
			}else{
				console.log('hiding the calender and time chooser ');
				var textField = this.getChildControl("textfield");
				var selectedDate = this.getChildControl("list").getValue();
				var selectedTime = this.getChildControl("timechooser").getValue();
				
				selectedDate.setHours(0);
				selectedDate.setMinutes(0);
				
				//console.log('selectedTime: '+selectedTime);
				
				selectedDate = new Date( selectedDate.getTime() + ( selectedTime.getHours()*60*60 + selectedTime.getMinutes()*60 ) * 1000 );
				
				//console.log('selectedDate: '+selectedDate);

				textField.setValue( this.getDateFormat().format(selectedDate) );
			}
	    },
		
		// overridden
		setValue : function(value)
	    {
			// set the date to the textfield
			var textField = this.getChildControl("textfield");
			textField.setValue(this.getDateFormat().format(value));
			
			//set the time chooser
			var timeChooser = this.getChildControl("timechooser");
			timeChooser.setValueFromDate(value);
			
			//remove the minutes and hours from the date
			value = new Date( value.getTime() - ( value.getHours()*60*60 + value.getMinutes()*60 )*1000 );
			
			// set the date in the datechooser
			var dateChooser = this.getChildControl("list");
			dateChooser.setValue(value);
	    }
		
		
		
		// ===================================================
		// =        EVENTS                                   =
		// ===================================================
		
		// overridden
		// _onChangeDate : function(e)
		// {
		// 	var textField = this.getChildControl("textfield");
		// 	var selectedDate = this.getChildControl("list").getValue();
		// 	
		// 	textField.setValue(this.getDateFormat().format(selectedDate));
		// 	this.close();
		// 	    }
		
	}
	
});

gistfile1.js

//you'll also need to add these few lines to your Appearance class:


		"datetimefield" : "datefield" ,
		"timechooser/hour-slider" : "slider",
		"timechooser/minute-slider" : "slider",
		"datetimefield/timechooser" : "widget",
		"datetimefield/timechooser/hour-slider" : "timechooser/hour-slider",
		"datetimefield/timechooser/minute-slider" : "timechooser/minute-slider"

TimeChooser

qx.Class.define("yinzanalytics.control.TimeChooser", 
{
	extend : qx.ui.core.Widget,

	construct : function()
	{
		this.base(arguments);
		
		// set the layout
			var layout = new qx.ui.layout.Grid();
			this._setLayout(layout);
			layout.setColumnFlex(0, 1);
			layout.setColumnFlex(1, 1);
			layout.setColumnFlex(2, 1);
			
			layout.setColumnAlign( 0, "left", "middle" );
			layout.setColumnAlign( 1, "center", "middle" );
			layout.setColumnAlign( 2, "right", "middle" );
		
		this._createChildControl("hour-slider");
		this._createChildControl("minute-slider");
		
		// register mouse up and down handler
			this.addListener("mousedown", this._onMouseUpDown, this);
			this.addListener("mouseup", this._onMouseUpDown, this);
		
	},
	
	
	/*
	*****************************************************************************
		 PROPERTIES
	*****************************************************************************
	*/

	properties :
	{
		appearance :
		{
			refine : true,
			init   : "timechooser"
		},
	
		/** The date value of the widget. */
		value :
		{
			check : "Date",
			init : null,
			nullable : true,
			event : "changeValue",
			apply : "_applyValue"
		}
	},
	
	members :
	{
		
		setValueFromDate : function(date){
			//console.log("TimeChooser, set value from date");
			//console.log(date);
			this.setValue( new Date( ( (1 + date.getHours() ) * 60*60 + date.getMinutes() * 60 + date.getTimezoneOffset()*60 ) * 1000 ) );
		},
		
		_applyValue : function(value,old){
			
			if( value.getHours() !== this.getChildControl("hour-slider").getValue() ){
				//console.log('apply value h: '+value.getHours());
				this.getChildControl("hour-slider").setValue(value.getHours());
			}
			
			if( value.getMinutes() !== this.getChildControl("minute-slider").getValue() ){
				//console.log('apply value min: '+value.getMinutes());
				this.getChildControl("minute-slider").setValue(value.getMinutes());
			}
		},
		
		_createChildControlImpl : function(id)
		{
			var control;
			
			switch(id)
			{
				
				case "hour-slider":
					control = new qx.ui.form.Slider().set({
						minimum: 0,
				        maximum: 23,
				        singleStep: 1,
				        value: 0
					});
					control.setFocusable(false);
					var hs = control;
					var minimum = new qx.ui.basic.Label("12 am");
					var value = new qx.ui.basic.Label(this.__getHourFormat(hs.getValue()));
					var maximum = new qx.ui.basic.Label( "11 pm" );
					
					hs.addListener("changeValue", function(e) {
						//update the label when the slider changes
						value.setValue(this.__getHourFormat(hs.getValue()));
						//console.log('hour slider value changed: '+hs.getValue());
						var new_date = new Date(0);
						new_date.setHours(hs.getValue());
						new_date.setMinutes(this.getChildControl('minute-slider').getValue());
						this.setValue( new_date );
						//console.log('new date chooser value');
						//console.log(this.getValue());
					},this);
					
					this._add(minimum, {row: 0, column: 0});
					
					value.setTextAlign("center");
					this._add(value, {row: 0, column: 1});
					
					maximum.setTextAlign("right");
					this._add(maximum, {row: 0, column: 2});
					
					// Add the hour selection element
					this._add(control,{row:1,column:0,colSpan:3,rowSpan:1});
					break;
					
				case "minute-slider":
					control = new qx.ui.form.Slider().set({
						minimum: 0,
						maximum: 59,
						singleStep: 1,
						value: 0
					});
					control.setFocusable(false);
					var ms = control;
					var minimum = new qx.ui.basic.Label("0 min");
					var value = new qx.ui.basic.Label( ms.getValue().toString() + " min" );
					var maximum = new qx.ui.basic.Label( "59 min" );
					
					ms.addListener("changeValue", function(e){
						value.setValue( ms.getValue().toString() + " min" );
						var new_date = new Date(0);
						new_date.setMinutes(ms.getValue());
						new_date.setHours(this.getChildControl('hour-slider').getValue());
						this.setValue( new_date );
					},this);
					this._add(minimum,{row:2,column:0});
					
					value.setTextAlign("center");
					this._add(value,{row:2,column:1});
					
					maximum.setTextAlign("right");
					this._add(maximum,{row:2,column:2});
					
					// Add the minute selection element
					this._add(control,{row:3,column:0,colSpan:3,rowSpan:1});
					break;
				
			}
			return control || this.base(arguments, id);
		},
		
		__getHourFormat : function( hours ){
			var isPM = (hours / 12) >= 1;
			hours = hours % 12;
			if(hours==0) hours = 12;
			return hours.toString() + (isPM?" pm":" am");
		},
		
		
		/*
			---------------------------------------------------------------------------
				EVENT HANDLER
			---------------------------------------------------------------------------
			*/

			/**
			 * Handler which stops the propagation of the click event if
			 * the navigation bar or calendar headers will be clicked.
			 *
			 * @param e {qx.event.type.Mouse} The mouse up / down event
			 */

		_onMouseUpDown : function(e) {
			var target = e.getTarget();
			if ( target == this.getChildControl("hour-slider") ) {
				e.stopPropagation();
				//console.log("stopped propigation");
				return;
			}
		}
	}
});