Results 1 to 7 of 7

Thread: Change the color of some cell dynamically in date picker

  1. #1
    Ext User
    Join Date
    Mar 2009
    Posts
    26
    Vote Rating
    0
      0  

    Default Change the color of some cell dynamically in date picker

    I want to highlight more than one cell in datepicker .Currenty in datepicker only one cell is hightlighted which is the current date of the day.

    can we pass array of date which should we want to highlight

    i am using this code to select date cell which is my own choice but this only select one

    var dp = new Ext.DatePicker({ renderTo:id, format:"m/d/y"});

    selectedDate = new Date("04/03/2009");

    dp.setValue(selectedDate);

    dp.addListener("select", onSelect);

    i want if we have three date which i want to highlight that cell how i can do this

    i found this code but it does not work.

    var dp = new Ext.DatePicker({ renderTo:id, format:"m/d/y"});

    dp.on('select', function(Datepicker, date) { dp.setValue("04/17/2009"); });


    any help

    regards

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    131
      0  

    Default

    Do you also want to select multiple dates or do you only want to highlight multiple dates?

    The first one isn't very easy to do, but for the second one you only need to overwrite the update method (which, unfortunately, is a bit large).

  3. #3
    Ext User
    Join Date
    Mar 2009
    Posts
    26
    Vote Rating
    0
      0  

    Default

    thanks for reply

    Just want to highlight the cell.

    I have records in db table with date .

    get all records from that table like 04/13/2009 , 04/11/2009 and so on .

    in datepicker the day 13 of 4th month cell should be in red color and same with date 04/11/2009.

    but when i use onselect it just change the cell color of one cell not the all which i provide

    regards.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    131
      0  

    Default

    Ext.DatePicker doesn't have support for this, so you would need to add it:
    Code:
    Ext.override(Ext.DatePicker, {
    	update : function(date, forceRefresh){
    		var vd = this.activeDate;
    		this.activeDate = date;
    		if(!forceRefresh && vd && this.el){
    			var t = date.getTime();
    			if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
    				this.cells.removeClass("x-date-selected");
    				this.cells.each(function(c){
    				   if(c.dom.firstChild.dateValue == t){
    					   c.addClass("x-date-selected");
    					   setTimeout(function(){
    							try{c.dom.firstChild.focus();}catch(e){}
    					   }, 50);
    					   return false;
    				   }
    				});
    				return;
    			}
    		}
    		var days = date.getDaysInMonth();
    		var firstOfMonth = date.getFirstDateOfMonth();
    		var startingPos = firstOfMonth.getDay()-this.startDay;
    		if(startingPos <= this.startDay){
    			startingPos += 7;
    		}
    		var pm = date.add("mo", -1);
    		var prevStart = pm.getDaysInMonth()-startingPos;
    		var cells = this.cells.elements;
    		var textEls = this.textNodes;
    		days += startingPos;
    		var day = 86400000;
    		var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
    		var today = new Date().clearTime().getTime();
    		var sel = date.clearTime().getTime();
    		var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
    		var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
    		var ddMatch = this.disabledDatesRE;
    		var ddText = this.disabledDatesText;
    		var ddays = this.disabledDays ? this.disabledDays.join("") : false;
    		var ddaysText = this.disabledDaysText;
    		var hdates = this.highlightDates ? ';' + this.highlightDates.join(';') + ';' : false;
    		var format = this.format;
    		if(this.showToday){
    			var td = new Date().clearTime();
    			var disable = (td < min || td > max ||
    				(ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
    				(ddays && ddays.indexOf(td.getDay()) != -1));
    			this.todayBtn.setDisabled(disable);
    			this.todayKeyListener[disable ? 'disable' : 'enable']();
    		}
    		var setCellClass = function(cal, cell){
    			cell.title = "";
    			var t = d.getTime();
    			cell.firstChild.dateValue = t;
    			if(t == today){
    				cell.className += " x-date-today";
    				cell.title = cal.todayText;
    			}
    			if(t == sel){
    				cell.className += " x-date-selected";
    				setTimeout(function(){
    					try{cell.firstChild.focus();}catch(e){}
    				}, 50);
    			}
    			if(t < min) {
    				cell.className = " x-date-disabled";
    				cell.title = cal.minText;
    				return;
    			}
    			if(t > max) {
    				cell.className = " x-date-disabled";
    				cell.title = cal.maxText;
    				return;
    			}
    			if(ddays){
    				if(ddays.indexOf(d.getDay()) != -1){
    					cell.title = ddaysText;
    					cell.className = " x-date-disabled";
    				}
    			}
    			if(ddMatch && format){
    				var fvalue = d.dateFormat(format);
    				if(ddMatch.test(fvalue)){
    					cell.title = ddText.replace("%0", fvalue);
    					cell.className = " x-date-disabled";
    				}
    			}
    			if(hdates){
    				var fvalue = d.dateFormat(format);
    				if(hdates.indexOf(';' + fvalue + ';')) != -1){
    					cell.className = ' x-date-highlight';
    				}
    			}
    		};
    		var i = 0;
    		for(; i < startingPos; i++) {
    			textEls[i].innerHTML = (++prevStart);
    			d.setDate(d.getDate()+1);
    			cells[i].className = "x-date-prevday";
    			setCellClass(this, cells[i]);
    		}
    		for(; i < days; i++){
    			var intDay = i - startingPos + 1;
    			textEls[i].innerHTML = (intDay);
    			d.setDate(d.getDate()+1);
    			cells[i].className = "x-date-active";
    			setCellClass(this, cells[i]);
    		}
    		var extraDays = 0;
    		for(; i < 42; i++) {
    			 textEls[i].innerHTML = (++extraDays);
    			 d.setDate(d.getDate()+1);
    			 cells[i].className = "x-date-nextday";
    			 setCellClass(this, cells[i]);
    		}
    		this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());
    		if(!this.internalRender){
    			var main = this.el.dom.firstChild;
    			var w = main.offsetWidth;
    			this.el.setWidth(w + this.el.getBorderWidth("lr"));
    			Ext.fly(main).setWidth(w);
    			this.internalRender = true;
    			if(Ext.isOpera && !this.secondPass){
    				main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
    				this.secondPass = true;
    				this.update.defer(10, this, [date]);
    			}
    		}
    	}
    });
    This adds a highlightDates config option that can hold an array of dates (as string, formatted as the used date format).

    And you would need to add a CSS rule for .x-date-highlight with the background-color and color you want.

  5. #5
    Sencha User
    Join Date
    Jan 2009
    Posts
    79
    Vote Rating
    0
      0  

    Default

    Thank you. Simple and great!
    The only thing I have to ask:
    I have to set the highlighted days dynamically, after render, on some events. I can set the highlightDates attribute, but does not happen anything, because the update() method is not called. I have to call the
    date_picker.showPrevMonth();
    date_picker.showNextMonth();
    methods to get the highlighted days visible.
    Is there a more elegant way to do the refresh of the current month?

    Thank you very much!

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    131
      0  

    Default

    Call:
    Code:
    date_picker.update(date_picker.activeDate, true);

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Do you have Java Version for this custom update() method?

    Quote Originally Posted by Condor View Post
    Ext.DatePicker doesn't have support for this, so you would need to add it:
    Code:
    Ext.override(Ext.DatePicker, {
        update : function(date, forceRefresh){
            var vd = this.activeDate;
            this.activeDate = date;
            if(!forceRefresh && vd && this.el){
                var t = date.getTime();
                if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
                    this.cells.removeClass("x-date-selected");
                    this.cells.each(function(c){
                       if(c.dom.firstChild.dateValue == t){
                           c.addClass("x-date-selected");
                           setTimeout(function(){
                                try{c.dom.firstChild.focus();}catch(e){}
                           }, 50);
                           return false;
                       }
                    });
                    return;
                }
            }
            var days = date.getDaysInMonth();
            var firstOfMonth = date.getFirstDateOfMonth();
            var startingPos = firstOfMonth.getDay()-this.startDay;
            if(startingPos <= this.startDay){
                startingPos += 7;
            }
            var pm = date.add("mo", -1);
            var prevStart = pm.getDaysInMonth()-startingPos;
            var cells = this.cells.elements;
            var textEls = this.textNodes;
            days += startingPos;
            var day = 86400000;
            var d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime();
            var today = new Date().clearTime().getTime();
            var sel = date.clearTime().getTime();
            var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
            var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
            var ddMatch = this.disabledDatesRE;
            var ddText = this.disabledDatesText;
            var ddays = this.disabledDays ? this.disabledDays.join("") : false;
            var ddaysText = this.disabledDaysText;
            var hdates = this.highlightDates ? ';' + this.highlightDates.join(';') + ';' : false;
            var format = this.format;
            if(this.showToday){
                var td = new Date().clearTime();
                var disable = (td < min || td > max ||
                    (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
                    (ddays && ddays.indexOf(td.getDay()) != -1));
                this.todayBtn.setDisabled(disable);
                this.todayKeyListener[disable ? 'disable' : 'enable']();
            }
            var setCellClass = function(cal, cell){
                cell.title = "";
                var t = d.getTime();
                cell.firstChild.dateValue = t;
                if(t == today){
                    cell.className += " x-date-today";
                    cell.title = cal.todayText;
                }
                if(t == sel){
                    cell.className += " x-date-selected";
                    setTimeout(function(){
                        try{cell.firstChild.focus();}catch(e){}
                    }, 50);
                }
                if(t < min) {
                    cell.className = " x-date-disabled";
                    cell.title = cal.minText;
                    return;
                }
                if(t > max) {
                    cell.className = " x-date-disabled";
                    cell.title = cal.maxText;
                    return;
                }
                if(ddays){
                    if(ddays.indexOf(d.getDay()) != -1){
                        cell.title = ddaysText;
                        cell.className = " x-date-disabled";
                    }
                }
                if(ddMatch && format){
                    var fvalue = d.dateFormat(format);
                    if(ddMatch.test(fvalue)){
                        cell.title = ddText.replace("%0", fvalue);
                        cell.className = " x-date-disabled";
                    }
                }
                if(hdates){
                    var fvalue = d.dateFormat(format);
                    if(hdates.indexOf(';' + fvalue + ';')) != -1){
                        cell.className = ' x-date-highlight';
                    }
                }
            };
            var i = 0;
            for(; i < startingPos; i++) {
                textEls[i].innerHTML = (++prevStart);
                d.setDate(d.getDate()+1);
                cells[i].className = "x-date-prevday";
                setCellClass(this, cells[i]);
            }
            for(; i < days; i++){
                var intDay = i - startingPos + 1;
                textEls[i].innerHTML = (intDay);
                d.setDate(d.getDate()+1);
                cells[i].className = "x-date-active";
                setCellClass(this, cells[i]);
            }
            var extraDays = 0;
            for(; i < 42; i++) {
                 textEls[i].innerHTML = (++extraDays);
                 d.setDate(d.getDate()+1);
                 cells[i].className = "x-date-nextday";
                 setCellClass(this, cells[i]);
            }
            this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());
            if(!this.internalRender){
                var main = this.el.dom.firstChild;
                var w = main.offsetWidth;
                this.el.setWidth(w + this.el.getBorderWidth("lr"));
                Ext.fly(main).setWidth(w);
                this.internalRender = true;
                if(Ext.isOpera && !this.secondPass){
                    main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + "px";
                    this.secondPass = true;
                    this.update.defer(10, this, [date]);
                }
            }
        }
    });
    This adds a highlightDates config option that can hold an array of dates (as string, formatted as the used date format).

    And you would need to add a CSS rule for .x-date-highlight with the background-color and color you want.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •