PDA

View Full Version : Ext.picker.Date highlights selected day for all months



davidverm
1 May 2012, 10:39 PM
Hi,

It seems like the Ext.picker.Date is hightlighting the selected day for all months. Meaning if I select 12 March 2012 then the 12th will be highlight for all the other months in the date picker. Is there a way around this?

Thanks in advance.

vietits
2 May 2012, 12:51 AM
That behaviour is the nature of Date Picker. However, with Ext 4.1.0 we can change this behaviour by handling 'highlightitem' event as below:


Ext.onReady(function(){
Ext.create('Ext.picker.Date', {
renderTo: Ext.getBody(),
listeners: {
highlightitem: function(picker, cell){
if(cell.className && picker.activeDate.getTime() != picker.value.getTime()){
cell.className = cell.className.replace(' ' + picker.selectedCls, '');
}
}
}
});
});

davidverm
2 May 2012, 12:53 AM
Great! Thanks for the reply, I'll give it a try.

-David.

vietits
2 May 2012, 1:19 AM
Solution for Ext 4.0.7: override fullUpdate() of Ext.picker.Date. Example:


Ext.onReady(function(){
Ext.Ajax.on('beforerequest', function(connection, options){
console.log('beforerequest', options)
});

Ext.Ajax.on('requestcomplete', function(connection,response, options){
console.log('requestcomplete', response)
});


Ext.define('OverrideDatePicker', {
override: 'Ext.picker.Date',
fullUpdate: function(date, active){
var me = this,
cells = me.cells.elements,
textNodes = me.textNodes,
disabledCls = me.disabledCellCls,
eDate = Ext.Date,
i = 0,
extraDays = 0,
visible = me.isVisible(),
sel = +eDate.clearTime(date, true),
today = +eDate.clearTime(new Date()),
min = me.minDate ? eDate.clearTime(me.minDate, true) : Number.NEGATIVE_INFINITY,
max = me.maxDate ? eDate.clearTime(me.maxDate, true) : Number.POSITIVE_INFINITY,
ddMatch = me.disabledDatesRE,
ddText = me.disabledDatesText,
ddays = me.disabledDays ? me.disabledDays.join('') : false,
ddaysText = me.disabledDaysText,
format = me.format,
days = eDate.getDaysInMonth(date),
firstOfMonth = eDate.getFirstDateOfMonth(date),
startingPos = firstOfMonth.getDay() - me.startDay,
previousMonth = eDate.add(date, eDate.MONTH, -1),
longDayFormat = me.longDayFormat,
prevStart,
current,
disableToday,
tempDate,
setCellClass,
html,
cls,
formatValue,
value;
if (startingPos < 0) {
startingPos += 7;
}


days += startingPos;
prevStart = eDate.getDaysInMonth(previousMonth) - startingPos;
current = new Date(previousMonth.getFullYear(), previousMonth.getMonth(), prevStart, me.initHour);


if (me.showToday) {
tempDate = eDate.clearTime(new Date());
disableToday = (tempDate < min || tempDate > max ||
(ddMatch && format && ddMatch.test(eDate.dateFormat(tempDate, format))) ||
(ddays && ddays.indexOf(tempDate.getDay()) != -1));


if (!me.disabled) {
me.todayBtn.setDisabled(disableToday);
me.todayKeyListener.setDisabled(disableToday);
}
}


setCellClass = function(cell){
value = +eDate.clearTime(current, true);
cell.title = eDate.format(current, longDayFormat);
// store dateValue number as an expando
cell.firstChild.dateValue = value;
if(value == today){
cell.className += ' ' + me.todayCls;
cell.title = me.todayText;
}
if(value == sel){
if(value == me.value.getTime()){
cell.className += ' ' + me.selectedCls;
}


me.el.dom.setAttribute('aria-activedescendant', cell.id);
if (visible && me.floating) {
Ext.fly(cell.firstChild).focus(50);
}
}
// disabling
if(value < min) {
cell.className = disabledCls;
cell.title = me.minText;
return;
}
if(value > max) {
cell.className = disabledCls;
cell.title = me.maxText;
return;
}
if(ddays){
if(ddays.indexOf(current.getDay()) != -1){
cell.title = ddaysText;
cell.className = disabledCls;
}
}
if(ddMatch && format){
formatValue = eDate.dateFormat(current, format);
if(ddMatch.test(formatValue)){
cell.title = ddText.replace('%0', formatValue);
cell.className = disabledCls;
}
}
};


for(; i < me.numDays; ++i) {
if (i < startingPos) {
html = (++prevStart);
cls = me.prevCls;
} else if (i >= days) {
html = (++extraDays);
cls = me.nextCls;
} else {
html = i - startingPos + 1;
cls = me.activeCls;
}
textNodes[i].innerHTML = html;
cells[i].className = cls;
current.setDate(current.getDate() + 1);
setCellClass(cells[i]);
}


me.monthBtn.setText(me.monthNames[date.getMonth()] + ' ' + date.getFullYear());
}
});

Ext.create('Ext.picker.Date', {
renderTo: Ext.getBody()
});


});

davidverm
2 May 2012, 2:11 AM
Overriding the fullUpdate() of the Ext.picker.Date did the trick for me.

Thanks for the help!