CallBackery
view release on metacpan or search on metacpan
lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/DateTime.js view on Meta::CPAN
*
* @childControl list {qx.ui.control.DateChooser} date chooser component
* @childControl popup {qx.ui.popup.Popup} popup which shows the list control
* @childControl datefield {qx.ui.form.TextField} text field for manual date entry
* @childControl timefield {qx.ui.form.TextField} text field for manual date entry
* @childControl button {qx.ui.form.Button} button that opens the list control
*/
qx.Class.define("callbackery.ui.form.DateTime",
{
extend : qx.ui.core.Widget,
include : [
qx.ui.core.MRemoteChildrenHandling,
qx.ui.form.MForm
],
implement : [
qx.ui.form.IForm,
qx.ui.form.IDateForm
],
/*
*****************************************************************************
CONSTRUCTOR
*****************************************************************************
*/
construct : function()
{
this.base(arguments);
// set the layout
var layout = new qx.ui.layout.HBox();
this._setLayout(layout);
layout.setAlignY("middle");
this.setMaxWidth(220);
// datefield and button
var dateField = this._createChildControl("datefield");
this._createChildControl("button");
// timefield
var timeField = this._createChildControl("timefield");
// register listeners
this.addListener("tap", this._onTap, this);
this.addListener("blur", this._onBlur, this);
// forward the focusin and focusout events to the textfield. The textfield
// is not focusable so the events need to be forwarded manually.
this.addListener("focusin", function(e) {
// dateField.fireNonBubblingEvent("focusin", qx.event.type.Focus);
// dateField.setTextSelection(0,0);
}, this);
this.addListener("focusout", function(e) {
dateField.fireNonBubblingEvent("focusout", qx.event.type.Focus);
}, this);
// initializes the DateField with the default format
this._setDefaultDateFormat();
// adds a locale change listener
this._addLocaleChangeListener();
},
/*
*****************************************************************************
EVENTS
*****************************************************************************
*/
events :
{
/** Whenever the value is changed this event is fired
*
* Event data: The new text value of the field.
*/
"changeValue" : "qx.event.type.Data"
},
/*
*****************************************************************************
PROPERTIES
*****************************************************************************
*/
properties :
{
/** The formatter, which converts the selected date to a string. **/
dateFormat :
{
check : "qx.util.format.DateFormat",
apply : "_applyDateFormat"
},
/**
* String value which will be shown as a hint if the field is all of:
* unset, unfocused and enabled. Set to null to not show a placeholder
* text.
*/
placeholder :
{
check : "String",
nullable : true,
apply : "_applyPlaceholder"
},
// overridden
appearance :
{
refine : true,
init : "datefield"
},
// overridden
focusable :
{
refine : true,
init : true
},
// overridden
width :
{
refine : true,
init : 120
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
statics :
{
__dateFormat : null,
__formatter : null,
/**
* Get the shared default date formatter
*
* @return {qx.util.format.DateFormat} The shared date formatter
*/
getDefaultDateFormatter : function()
{
var format = qx.locale.Date.getDateFormat("medium").toString();
if (format == this.__dateFormat) {
return this.__formatter;
}
if (this.__formatter) {
this.__formatter.dispose();
}
this.__formatter = new qx.util.format.DateFormat(format, qx.locale.Manager.getInstance().getLocale());
this.__dateFormat = format;
return this.__formatter;
}
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members :
{
__localeListenerId : null,
/**
* @lint ignoreReferenceField(_forwardStates)
*/
_forwardStates : {
focused : true,
invalid : true
},
/*
---------------------------------------------------------------------------
PROTECTED METHODS
---------------------------------------------------------------------------
*/
/**
* Sets the default date format which is returned by
* {@link #getDefaultDateFormatter}. You can overrride this method to
* define your own default format.
*/
_setDefaultDateFormat : function() {
this.setDateFormat(qx.ui.form.DateField.getDefaultDateFormatter());
},
/**
* Checks for "qx.dynlocale" and adds a listener to the locale changes.
* On every change, {@link #_setDefaultDateFormat} is called to reinitialize
* the format. You can easily override that method to prevent that behavior.
*/
_addLocaleChangeListener : function() {
// listen for locale changes
if (qx.core.Environment.get("qx.dynlocale"))
{
this.__localeListenerId =
qx.locale.Manager.getInstance().addListener("changeLocale", function() {
this._setDefaultDateFormat();
}, this);
}
},
/*
---------------------------------------------------------------------------
PUBLIC METHODS
---------------------------------------------------------------------------
*/
/**
* This method sets the date, which will be formatted according to
* #dateFormat to the date field. It will also select the date in the
* calendar popup.
*
* @param value {Date} The date to set.
*/
setValue : function(value)
{
// set the date to the textfield
if (value != null) {
this.getChildControl("datefield").setValue(this.getDateFormat().format(value));
var h = value.getHours();
var m = value.getMinutes();
while (m.length<2) {
m = '0'+m;
}
while (h.length<2) {
h = '0'+h;
}
this.getChildControl("timefield").setValue(h+':'+m);
// set the date in the datechooser
var dateChooser = this.getChildControl("list");
dateChooser.setValue(value);
}
},
/**
* Returns the current set date, parsed from the input-field
* corresponding to the {@link #dateFormat}.
* If the given text could not be parsed, <code>null</code> will be returned.
*
* @return {Date} The currently set date.
*/
getValue : function()
{
// get the value of the textfields
var dc = this.getChildControl("datefield");
var tc = this.getChildControl("timefield");
var datefieldValue = dc.getValue();
var timefieldValue = tc.getValue();
var today = new Date();
today.setHours(0);
lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/DateTime.js view on Meta::CPAN
var popup = this.getChildControl("popup");
popup.placeToWidget(this, true);
popup.show();
},
/**
* Hides the date chooser popup.
*/
close : function() {
this.getChildControl("popup").hide();
},
/**
* Toggles the date chooser popup visibility.
*/
toggle : function()
{
var isListOpen = this.getChildControl("popup").isVisible();
if (isListOpen) {
this.close();
} else {
this.open();
}
},
/*
---------------------------------------------------------------------------
PROPERTY APPLY METHODS
---------------------------------------------------------------------------
*/
// property apply routine
_applyDateFormat : function(value, old)
{
// if old is undefined or null do nothing
if (!old) {
return;
}
// get the date with the old date format
try
{
var datefield = this.getChildControl("datefield");
var dateStr = datefield.getValue();
var currentDate = old.parse(dateStr);
datefield.setValue(value.format(currentDate));
}
catch (ex) {
// do nothing if the former date could not be parsed
}
},
// property apply routine
_applyPlaceholder : function(value, old) {
var p = value.split("@");
// this.getChildControl("datefield").setPlaceholder(qx.locale.Manager.tr(p[0]));
this.getChildControl("datefield").setPlaceholder(this.xtr(p[0]));
if (p[1] != null) {
this.getChildControl("timefield").setPlaceholder(p[1]);
}
},
/*
---------------------------------------------------------------------------
WIDGET API
---------------------------------------------------------------------------
*/
// overridden
_createChildControlImpl : function(id, hash)
{
var control;
switch(id)
{
case "datefield":
control = new qx.ui.form.TextField();
control.setFocusable(false);
control.addState("inner");
control.setMaxWidth(100);
control.setDecorator(null);
control.addListener("changeValue", this._onDateFieldChangeValue, this);
control.addListener("blur", this.close, this);
this._add(control, {flex:1});
break;
case "timefield":
control = new qx.ui.form.TextField();
control.setFocusable(false);
control.setDecorator(null);
control.setMaxWidth(80);
control.setMaxLength(5);
control.setFilter(/[\d:]/);
control.addState("inner");
control.addListener("changeValue", this._onTimeFieldChangeValue, this);
control.addListener("blur", this.close, this);
this._add(new qx.ui.core.Spacer(25));
this._add(control, {flex:1});
break;
case "button":
control = new qx.ui.form.Button();
control.setFocusable(false);
control.setKeepActive(true);
control.addState("inner");
control.addListener("execute", this.toggle, this);
this._add(control);
break;
case "list":
control = new qx.ui.control.DateChooser();
control.setFocusable(false);
control.setKeepFocus(true);
control.addListener("execute", this._onChangeDate, this);
lib/CallBackery/qooxdoo/callbackery/source/class/callbackery/ui/form/DateTime.js view on Meta::CPAN
// Apply to popup
var date = e.getData();
if (date != null && date != '')
{
var timefield = this.getChildControl("timefield");
var time = timefield.getValue();
var defaultTime = timefield.getPlaceholder();
var today = new Date();
var dateValue;
try {
dateValue = this.getDateFormat().parse(date);
}
catch (ex) {
this.debug('_onDateFieldChangeValue(): Invalid date format');
dateValue = today;
}
this.setValue(dateValue);
var list = this.getChildControl("list");
list.setValue(dateValue);
if (time != null) {
timefield.setValue(time);
}
else if (defaultTime != null) {
timefield.setValue(defaultTime);
}
}
// Fire event
this.fireDataEvent("changeValue", this.getValue());
},
/**
* Reacts on value changes of the text field.
*
* @param e {qx.event.type.Data} Change event
*/
_onTimeFieldChangeValue : function(e)
{
// Fire event
this.fireDataEvent("changeValue", this.getValue());
},
/**
* Checks if the textfield of the DateField is empty.
*
* @return {Boolean} True, if the textfield of the DateField is empty.
*/
isEmpty: function()
{
var value = this.getChildControl("datefield").getValue();
return value == null || value == "";
}
},
destruct : function() {
// listen for locale changes
if (qx.core.Environment.get("qx.dynlocale"))
{
if (this.__localeListenerId) {
qx.locale.Manager.getInstance().removeListenerById(this.__localeListenerId);
}
}
}
});
( run in 1.748 second using v1.01-cache-2.11-cpan-ceb78f64989 )