Extjs Date Time Picker, HighLight particular Date instead of system date

Question

Hi,

How to highlight the particular date in extjs calendar(Date Time Picker) control,

As default it will highlight the system date when it shows. I need to set highlight date as sql server date since it will be different.

Is there any property or override method to change the highlight date?

Note: Only highlight in the calendar not to set that value to text box.

Answer 1

I cannot find anything in the documentation about initialising the DatePicker control with a preselected date.

But you could do something like the following:

xtype: 'datepicker',
listeners: 
{
    render: function(control) {
        control.setValue(new Date('1/10/2007'));
    }
}

I don't know which event is most suitable for this kind of initialisation, but the render event does work for me :)

Happy Ext'ing.

Answer 2

You did not mention which version of ExtJS you're using, but I'm assuming 3.x.

What you're asking is not very easy. You would need to override the update method of Ext.DateField class, as highlighting is done in that function.

The cell that has the current date is assigned the x-date-today style class, which adds the red border around the current date etc. So if you just want to get rid of the highlighting altogether, consider overriding the style definition of that class.

UPDATE: Look for this line of code especially:

today = new Date().clearTime().getTime(),

A bit further down from there the today variable is used in setCellClass function to determine whether the chosen date is "today" (and if it should be highlighted). So you would want to assign a different value to the today variable, in your override method.

Also, like Chau already commented, if you think this or some other answer was helpful, please accept that as the correct answer. That will improve your accept rate.

Answer 3

If your question is: How do I set a different date in the calendar of a DateField control?

If you initialise the DateField control with your custom date, the buildin DatePicker will use that value as the highlighted date.

{
    xtype: 'datefield',
    value: '2011-02-28'
}

See the source file for Ext\src\widgets\form\DateField.js in the following method:

/**
 * @method onTriggerClick
 * @hide
 */
// private
// Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
onTriggerClick : function(){
    if(this.disabled){
        return;
    }
    if(this.menu == null){
        this.menu = new Ext.menu.DateMenu({
            hideOnClick: false,
            focusOnSelect: false
        });
    }
    this.onFocus();
    Ext.apply(this.menu.picker,  {
        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()); <--- LOOK HERE!!!
    this.menu.show(this.el, "tl-bl?");
    this.menuEvents('on');
}, 

But again, I'm not sure I understand your question :)