The different ways to set up disabled dates in a date field

With date fields, sometimes you need to disable specific dates or days, so that they cannot be selected.

The date field built in this recipe, with specific dates disabled, is shown in the following screenshot:

Specific days can also be disabled, as shown in the following screenshot:

How to do it...

1. 1. Declare a DateField with some disabled dates:

   var disabledDatesField={
   xtype: 'datefield',
   fieldLabel: 'Disabled dates example',
   disabledDates: ['4/15', '04/20/2009'],
   disabledDatesText: 'Office closed'
   };
   

2. 2. Declare a DateField with some disabled days:

   var disabledDaysField={
   xtype: 'datefield',
   fieldLabel: 'Disabled days example',
   disabledDays: ['2', '5'],
   disabledDaysText: 'Office Closed'
   };
   

3. 3. Create a container for the date fields:

   Ext.onReady(function() {
   var panel=new Ext.Panel({
   frame: true,
   title: 'DateField Examples',
   layout:'form',
   bodyStyle: 'padding:5px',
   width: 300,
   labelWidth:170,
   renderTo:Ext.getBody(),
   items: [disabledDatesField...