View Full Version : Highlight Dates in Datepicker control

9 Nov 2012, 12:30 PM
I am looking for a way to apply a class to one or more dates in a datepicker on the screen. I have extended the Ext.picker.Date control into my own "myDatepicker" control, and have that appearing on the screen successfully, but from there I'm kind of at a loss. I want to be able to assign a custom parameter, like "myDates" and have those dates (assume all in the same month) get a class assigned to them.

I looked through the source code for Ext.picker.Date (http://docs.sencha.com/ext-js/4-1/source/Date3.html#Ext-picker-Date) and looked at the "setDisabledDates" function, and honestly it wasn't clear how to modify this (in my own component of course) to use a different class.

If I add a function like "setMyDates" do I have to do something to get it to run when the "myDates" parameter is set at initiation? Like in "afterRender"?

Also how would I find and add a class to a specific date in the picker?

This is the main code that has the panel with the extended datepicker:

Ext.define('MyApp.view.ExtendTest', {
extend: 'Ext.container.Container',
requires: ['MyApp.view.myDatepicker'],
items: [
xtype: 'panel',
title: 'Extended Datepicker',
items: [{
xtype: "mydatepicker",
value: new Date("10/1/2012"),
myDates: ["10/12/2012"]

And this is the code I'm using that is extending the datepicker:

Ext.define('MyApp.view.myDatepicker', {
extend: 'Ext.picker.Date',
alias: 'widget.mydatepicker',

// defaults
myDates : [],
highlightCls : "",

// functions
initComponent: function() {
var me = this;

afterRender: function() {
// this will get called automatically
var me = this;

setMyDates: function() {
// this will not get called when the object is newly created

14 Nov 2012, 10:25 AM
So first thing you are asking is you want a custom disabled CSS class?

14 Nov 2012, 10:46 AM
Basically yes. I wanted to be able to highlight different sets of days by using css classes.

I ended up stealing code from the selectedUpdate function, and I pass it the info during the afterComponentLayout function call.

highlightDates: function (highlightDates, highlightCls, highlightTooltip) {
for(var i = 0; i < highlightDates.length; i++) {
var t = Ext.Date.parse(highlightDates[i], 'm/d/Y').getTime(),
cells = this.cells,
cellItems = cells.elements,
cLen = cellItems.length,

for (c = 0; c < cLen; c++) {
cell = Ext.fly(cellItems[c]);
if (cell.dom.firstChild.dateValue == t) {
cell.dom.title = highlightTooltip + ": " + cell.dom.title;