1. #1
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Answers
    1
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default Unanswered: Highlight Dates in Datepicker control

    Unanswered: Highlight Dates in Datepicker control


    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 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:

    Code:
    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:

    Code:
    Ext.define('MyApp.view.myDatepicker', {
        extend: 'Ext.picker.Date',
        alias: 'widget.mydatepicker',
    
        // defaults
        myDates    : [],
        highlightCls : "",
        
        // functions
        initComponent: function() {
            var me = this;
            me.callParent(arguments);
        },
    
        afterRender: function() {
            // this will get called automatically
            var me = this;
        },
    
        setMyDates: function() {
            // this will not get called when the object is newly created
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,643
    Answers
    3453
    Vote Rating
    816
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So first thing you are asking is you want a custom disabled CSS class?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Answers
    1
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default


    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.

    Code:
    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,
    			c,
    			cLen      = cellItems.length,
    			cell;
    
    
    			for (c = 0; c < cLen; c++) {
    				cell = Ext.fly(cellItems[c]);
    				if (cell.dom.firstChild.dateValue == t) {
    					cell.addCls(highlightCls);
    					cell.dom.title = highlightTooltip + ": " + cell.dom.title;
    					break;
    				}
    			}
    		}
    	}

Thread Participants: 1

Tags for this Thread