Using dateEditor outside an grid?

[Wolfgang]

Hello,

can the dateEditor (and maybe the other editors as well), be used outside a grid?
Say in a standard page or Dialog?

If so, an example or hint would be great.

Regards

Wolfgang

[tryanDLS]

I haven't tried, but looking at the code, there are a number of grid dependencies (e.g. css and row,col index). You probably take that code and use it as a base for something that's not dependant on a grid tho. You might want to wait til .40. Given the amount of work that's going into Grid ver 2, and the effort to decouple the pieces, the editors may be more standalone.

[Wolfgang]

Thank you. I thought also that it would become difficult. Lets wait for v0.4 :wink:

Wolfgang

[marmstrong]

The datepicker control isn't that bad to use outside of the grid. Here is a little wrapper around YAHOO.ext.DatePicker that is pretty straight forward.


var myDatePicker = function() {
this.textfield = null;
this.textDateFmt = 'm/d/Y'; // JS format string
this.showLink = null;
this.datepicker = null;
this.calID = YAHOO.util.Dom.generateId(0, 'yui-ext-dp-');
this.twoDigitYearCutoff = "1930"; // set to null to ignore. If Date.parse returns a year before this then add 100 years to put is in the proper century.
}
myDatePicker.prototype.settextField = function(inObj){
this.textfield = inObj;
}
myDatePicker.prototype.setcalButton = function(inObj){
this.showLink = inObj;
}
myDatePicker.prototype.init = function() {
this.datepicker = new YAHOO.ext.DatePicker(this.calID);
this.showLink.on('click', this.show, this, true);
// this.showLink.addClassOnOver('idtcal-button-over');
this.textfield.dom.value = new Date().dateFormat(this.textDateFmt);
}
myDatePicker.prototype.show = function() {
var r = this.showLink.getRegion();
var _this = this; // scope the callback appropriately
var selectedDate = new Date();
if( this.textfield.dom.value != '' ) {
selectedDate = Date.parse(this.textfield.dom.value);
if( isNaN(selectedDate) ) {
selectedDate = new Date();
} else {
selectedDate = new Date(selectedDate);
if( this.twoDigitYearCutoff && selectedDate.getFullYear() <= this.twoDigitYearCutoff ) {
selectedDate.setFullYear(selectedDate.getFullYear()+100);
}
}
}
this.datepicker.show(r.left, r.bottom, selectedDate, function(selDate) { _this.clickHandler(selDate); } );
}
myDatePicker.prototype.clickHandler = function(selDate) {
this.textfield.dom.value = selDate.dateFormat(this.textDateFmt);
}


Here is the code to use it.


calText = YAHOO.ext.DomHelper.append(document.body,
{tag: 'input', cls: 'idtcal-text', id: 'FilterCalText'});
calButton = YAHOO.ext.DomHelper.append(document.body,
{tag: 'div', cls: 'idtcal-button',
id: 'FilterCalButon', html: ''
});
var dt = new myDatePicker();
dt.settextField(getEl(calText.id));
dt.setcalButton(getEl(calButton.id));
dt.init();


This code could probably be cleaner but it works pretty well. I started with some code from another post on this forum. I don't remember where it was...

[Wolfgang]

Thank you very much for sharing this :D

Wolfgang

[csmara]

Hi,
does anybody have an example for a textEditor like the one in PropsGrid?


Thanks,