PDA

View Full Version : Datefield / DateMenu / DatePicker



thimothee
13 Oct 2009, 4:54 PM
I needed extended Datefield object so I found those codes:

This one override the DatePicker to manage highlightDates :
Posted by Condor on 04-14-2009, 04:48 AM (I've just added few prototypes and modify the hdates className setting function (in red))


Ext.DatePicker.prototype.todayText="Aujourd'hui";
Ext.override(Ext.DatePicker, {
update : function(date, forceRefresh){
var vd = this.activeDate;
this.activeDate = date;
if(!forceRefresh && vd && this.el){
var t = date.getTime();
if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
this.cells.removeClass("x-date-selected");
this.cells.each(function(c){
if(c.dom.firstChild.dateValue == t){
c.addClass("x-date-selected");
setTimeout(function(){
try{c.dom.firstChild.focus();}catch(e){}
}, 50);
return false;
}
});
return;
}
}
var days = date.getDaysInMonth();
var firstOfMonth = date.getFirstDateOfMonth();
var startingPos = firstOfMonth.getDay()-this.startDay;
if(startingPos <= this.startDay){
startingPos += 7;
}
var pm = date.add("mo", -1);
var prevStart = pm.getDaysInMonth()-startingPos;
var cells = this.cells.elements;
var textEls = this.textNodes;
days += startingPos;
var day = 86400000;
var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
var today = new Date().clearTime().getTime();
var sel = date.clearTime().getTime();
var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
var ddMatch = this.disabledDatesRE;
var ddText = this.disabledDatesText;
var ddays = this.disabledDays ? this.disabledDays.join("") : false;
var ddaysText = this.disabledDaysText;
var hdates = this.highlightDates ? this.highlightDates: false;
var format = this.format;
var oThis=this;
if(this.showToday){
var td = new Date().clearTime();
var disable = (td < min || td > max ||
(ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
(ddays && ddays.indexOf(td.getDay()) != -1));
this.todayBtn.setDisabled(disable);
this.todayKeyListener[disable ? 'disable' : 'enable']();
}
var setCellClass = function(cal, cell){
cell.title = "";
var t = d.getTime();
cell.firstChild.dateValue = t;
if(t == today){
cell.className += " x-date-today";
cell.title = cal.todayText;
}
if(t == sel){
cell.className += " x-date-selected";
setTimeout(function(){
try{cell.firstChild.focus();}catch(e){}
}, 50);
}
if(t < min) {
cell.className = " x-date-disabled";
cell.title = cal.minText;
return;
}
if(t > max) {
cell.className = " x-date-disabled";
cell.title = cal.maxText;
return;
}
if(ddays){
if(ddays.indexOf(d.getDay()) != -1){
cell.title = ddaysText;
cell.className = " x-date-disabled";
}
}
if(ddMatch && format){
var fvalue = d.dateFormat(format);
if(ddMatch.test(fvalue)){
cell.title = ddText.replace("%0", fvalue);
cell.className = " x-date-disabled";
}
}
if(hdates){
var fvalue = d.dateFormat("d/m/Y");
if(hdates[fvalue])
{
cell.className = ' x-date-disabled x-date-'+hdates[fvalue];
}
}
};
var i = 0;
for(; i < startingPos; i++) {
textEls[i].innerHTML = (++prevStart);
d.setDate(d.getDate()+1);
cells[i].className = "x-date-prevday";
setCellClass(this, cells[i]);
}
for(; i < days; i++){
var intDay = i - startingPos + 1;
textEls[i].innerHTML = (intDay);
d.setDate(d.getDate()+1);
cells[i].className = "x-date-active";
setCellClass(this, cells[i]);
}
var extraDays = 0;
for(; i < 42; i++) {
textEls[i].innerHTML = (++extraDays);
d.setDate(d.getDate()+1);
cells[i].className = "x-date-nextday";
setCellClass(this, cells[i]);
}
this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());
if(!this.internalRender){
var main = this.el.dom.firstChild;
var w = main.offsetWidth;
this.el.setWidth(w + this.el.getBorderWidth("lr"));
Ext.fly(main).setWidth(w);
this.internalRender = true;
if(Ext.isOpera && !this.secondPass){
main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
this.secondPass = true;
this.update.defer(10, this, [date]);
}
}
}
});
Ext.DatePicker.prototype.dayNames =["D","L","M","M","J","V","S"];
Ext.DatePicker.prototype.monthNames =["Janvier","FĂ©vrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];


This one is optionnal but very useful, it allows you to use arrow to move inside the DatePicker window :

Posted by Mystic on Mar 2007


Ext.override(Ext.menu.DateMenu, {
initComponent: function() {
this.on('beforeshow', this.onBeforeShow, this);
if (this.strict = (Ext.isIE7 && Ext.isStrict)) {
this.on('show', this.onShow, this, {
single: true,
delay: 20
});
}
Ext.apply(this, {
plain: true,
showSeparator: false,
items: this.picker = new Ext.DatePicker(Ext.apply({
internalRender: this.strict || !Ext.isIE,
ctCls: 'x-menu-date-item'
},
this.initialConfig))
});
this.picker.purgeListeners();
this.relayEvents(this.picker, ["select"]); // *** group picker-related method calls

// *** focus picker for keyboard nav when DateMenu is displayed
this.on('show', this.picker.focus, this.picker);
Ext.menu.DateMenu.superclass.initComponent.call(this);
}
});


But to update automatically the Datefield's DatePicker when the trigger is clicked, I needed to override the Ext.form.DateField too.
And here is the code (lines to add are in red):



Ext.override(Ext.form.DateField,{
onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.DateMenu({
autoDestroy:true,
hideOnClick: false
});
}
this.onFocus();
Ext.apply(this.menu.picker, {
highlightDates:this.highlightDates,
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.disabledDatesRE,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
showToday : this.showToday,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue))
});
this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
this.menu.picker.update(this.menu.picker.getValue(),true);
this.menuEvents('on');
}
});


And here is an example of jsonData for the "highlightDates" :


var hlDates={"22/05/2009":"DIR","01/06/2009":"DIR","06/07/2009":"GRP"};
var datefield=new Ext.form.DateField({id:"test",..., highlightDates:hlDates});
var form=Ext.form.FormPanel(
{
id:"formtest",
items:[{xtype:"label",text:"Date"}, datefield]
}
);




The DIR, DIR and GRP values are css className and are used to format the corresponding cells.
For example, the "22/05/2009" cell in the DatePicker will have a pink background, etc ...

This works fine for me, but I find the JsonData code very heavy. And I'm looking for better way to set className for the highlightDates without using an object with dates as field's ids (ref : red part of DatePicker override).

If someone has another solution, I'd take it ;) !

That my first post and I'm french, so I appologize for my english. :s :D !