extjs5 : How to disable all dates after today's date

Question

I am using extjs datefield

Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), width: 300, items: [{ xtype: 'datefield', fieldLabel: 'From', maxValue: new Date()
}, { xtype: 'datefield', fieldLabel: 'To', }] });

when using this code in extjs 4 it works perfectly to disable all dates after today's date , It done by using maxValue= now Date() .In extjs 5 the user can't select any day after today's date but it is not disable. How can I disable these dates ??

Thanks in advance

Answer 1

Not sure you can... the invalid days have been given the right classes, and have all the correct setup. But the HTML is different.

In Ext4, the template for rendering a date cell is

'<a role="presentation" hidefocus="on" class="{parent.baseCls}-date" href="#"></a>',

But in Ext5, the template is

'<div hidefocus="on" class="{parent.baseCls}-date"></div>',

The other problem is that the SASS code for the styles still assumes that the cell is a A tag, not a DIV

// include the element name since :hover causes performance issues in IE7 and 8 otherwise
a.#{$prefix}datepicker-date:hover {
  color: $datepicker-item-color; // needed to override color for prevday/nextday
  background-color: $datepicker-item-hover-background-color;
}

In short, this appears to be a bug in ExtJS 5 - the Javascript widget has been converted, but the CSS isn't. I suggest raising the bug with them.