[CLOSED] Disable specific dates and ranges in the DateField control

  1. #1

    [CLOSED] Disable specific dates and ranges in the DateField control

    I'm curious if I can do the following with the DateField control, and if so, how:

    • Only allow a specific date range to be available to choose
    • Disable specific dates within that range
    • Change the font color for specific dates


    For example, I want to only allow the past year to be selectable up to yesterday, and within that range, I want to disable a bunch of days. I would need to do this from the code behind.

    Thanks,
    Jeremy
    Last edited by Daniil; Jul 26, 2010 at 6:35 AM.
  2. #2
    Hello, jmcantrell!

    Only allow a specific date range to be available to choose
    Disable specific dates within that range
    Please look at this solution for these two items.

    <script runat="server">
        
        protected void Page_Load(object sender, EventArgs e)
        {
            //Setting min and max dates
            this.df.MinDate = DateTime.Today;
            this.df.MaxDate = DateTime.Today.AddMonths(2);
    
            // Disable dates section
            //this.df.DisabledDates = new DisabledDateCollection();
    
            this.df.DisabledDates.Add(new DisabledDate(DateTime.Today.AddDays(3)));
    
            // disable these exact dates:
            this.df.DisabledDates.Add(new DisabledDate(2010, 7, 28));
            this.df.DisabledDates.Add(new DisabledDate(2010, 7, 30));
    
            // disable every second day of every month of every year:
            this.df.DisabledDates.Add(new DisabledDate("^02")); //It may work differently because of your locale may be different from mine
    
            this.df.DisabledDatesText = "Here is your disabled dates text"; //Tool tip
    
            // Disabling days section
            df.DisabledDays = new int[] { 0 }; // disable Sunday
    
            this.df.DisabledDaysText = "Here is your disabled days text"; //Tool tip      
        }
        
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>    
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug">
        </ext:ResourceManager>
        <form id="Form1" runat="server">
        <ext:DateField ID="df" runat="server" Width="180" FieldLabel="To">
        </ext:DateField>
        </form>
    </body>
    </html>
    Change the font color for specific dates
    An the moment I'm working on that item.
    Do you want to change the font color for specific dates regardless which are disabled or not?
    Last edited by Daniil; Jul 23, 2010 at 11:18 AM.
  3. #3
    Change the font color for specific dates
    There is no typical way to implement it. Here is a little bit workaround:)
    Hungus but effective.

    <script runat="server">
        
        protected void Page_Load(object sender, EventArgs e)
        {
            //A year in YYYY format, a month from 0 to 11, a day from 1 to 31
            String specificDates = 
                "[" + 
                    "new Date(2010, 06, 15)" +
                    ",new Date(2010, 06, 20)" +
                    ",new Date(2010, 06, 25)" +
                    ",new Date(2010, 07, 25)" +
                    ",new Date(2010, 05, 25)" +                
                "]";
            this.df.CustomConfig.Add(new ConfigItem("specificDates", specificDates, ParameterMode.Raw));
        }
        
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .your-class-for-specific-dates
            {
                color: red;
                font-family: Arial;
                font-size: 120%;
                font-style: oblique;
            }
        </style>
        <ext:ResourcePlaceHolder runat="server">
        </ext:ResourcePlaceHolder>
    
        <script type="text/javascript">
            Ext.form.DateField.override({
                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)),
                        specificDates: this.specificDates //workaround
                    });
                    this.menu.picker.setValue(this.getValue() || new Date());
                    this.menu.show(this.el, "tl-bl?");
                    this.menuEvents('on');
                }
            });
    
            Ext.DatePicker.override({
                update: function(date, forceRefresh) {
                    if (this.rendered) {
                        var vd = this.activeDate, vis = this.isVisible();
                        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');
                                        if (vis && !this.cancelFocus) {
                                            Ext.fly(c.dom.firstChild).focus(50);
                                        }
                                        return false;
                                    }
                                }, this);
                                return;
                            }
                        }
                        var days = date.getDaysInMonth(),
                            firstOfMonth = date.getFirstDateOfMonth(),
                            startingPos = firstOfMonth.getDay() - this.startDay;
    
                        if (startingPos < 0) {
                            startingPos += 7;
                        }
                        days += startingPos;
    
                        var pm = date.add('mo', -1),
                            prevStart = pm.getDaysInMonth() - startingPos,
                            cells = this.cells.elements,
                            textEls = this.textNodes,
                        // convert everything to numbers so it's fast
                            d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)),
                            today = new Date().clearTime().getTime(),
                            sel = date.clearTime(true).getTime(),
                            min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
                            max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
                            ddMatch = this.disabledDatesRE,
                            ddText = this.disabledDatesText,
                            ddays = this.disabledDays ? this.disabledDays.join('') : false,
                            ddaysText = this.disabledDaysText,
                            format = this.format;
    
                        if (this.showToday) {
                            var td = new Date().clearTime(),
                        disable = (td < min || td > max ||
                        (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
                        (ddays && ddays.indexOf(td.getDay()) != -1));
    
                            if (!this.disabled) {
                                this.todayBtn.setDisabled(disable);
                                this.todayKeyListener[disable ? 'disable' : 'enable']();
                            }
                        }
    
                        var setCellClass = function(cal, cell) {
                            cell.title = '';
                            var t = d.clearTime(true).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';
                                if (vis) {
                                    Ext.fly(cell.firstChild).focus(50);
                                }
                            }
                            // disabling
                            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';
                                }
                            }
                        };
    
                        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]);
                        }
    
                        //Begin of workaround
                        if (Ext.isArray(this.specificDates)) {
                            var prevStart = pm.getDaysInMonth() - startingPos,
                                d = new Date(pm.getFullYear(), pm.getMonth(), prevStart),
                                textEls = this.textNodes;
    
                            for (i = 0; i < 42; i++) {
                                d.setDate(d.getDate() + 1);
                                textEls[i].className = "";
                                for (var j = 0; j < this.specificDates.length; j++) {
                                    if (d.toDateString() == this.specificDates[j].toDateString()) {
                                        textEls[i].className = "your-class-for-specific-dates";
                                    }
                                }
                            }
                        }
                        //end of workaround
    
                        this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
    
                        if (!this.internalRender) {
                            var main = this.el.dom.firstChild,
                        w = main.offsetWidth;
                            this.el.setWidth(w + this.el.getBorderWidth('lr'));
                            Ext.fly(main).setWidth(w);
                            this.internalRender = true;
                            // opera does not respect the auto grow header center column
                            // then, after it gets a width opera refuses to recalculate
                            // without a second pass
                            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]);
                            }
                        }
                    }
                }
            });
        </script>
    
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug">
        </ext:ResourceManager>
        <form id="Form1" runat="server">
        <ext:DateField ID="df" runat="server" Width="180">
        </ext:DateField>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jul 23, 2010 at 4:55 PM.
  4. #4
    There's a simple way using css if you just want to highlight dates on initial load. The last post in this thread contains the code to do it:

    http://forums.ext.net/showthread.php...-in-datepicker

    In my application, I extended the datepicker class further to refresh the date when you change months and stuff.
  5. #5
    Hello, jchau!

    Thank you for the link. There is a really better solution than mine.

    Jmcantrell, here is the code for a DataField class with setting specific dates in a code behind. And now you can set different styles for a whole cell and for a text within a cell.

    <script runat="server">
        
        protected void Page_Load(object sender, EventArgs e)
        {
            //A year in YYYY format, a month from 0 to 11, a day from 1 to 31
            String specificDates =
                "[" +
                    "new Date(2010, 06, 15)" +
                    ",new Date(2010, 06, 20)" +
                    ",new Date(2010, 06, 25)" +
                    ",new Date(2010, 07, 25)" +
                    ",new Date(2010, 05, 25)" +
                "]";
    
            this.df.CustomConfig.Add(new ConfigItem("specificDates", specificDates, ParameterMode.Raw));
        }
        
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            a.x-datepicker-eventdate
            {
                border: 1px solid #a3bad9;
                padding: 1px 4px;
            }
            
            .your-class-for-specific-dates
            {
                color: red;
                font-family: Arial;
                font-size: 120%;
                font-style: oblique;
            }
        </style>
        <ext:ResourcePlaceHolder runat="server" Mode="Script" />
    
        <script type="text/javascript">
            Ext.override(Ext.DatePicker, {
                highlightDates: function(specificDates, cssClass) {
                    if (Ext.isEmpty(specificDates))
                        return;
                    var dateValues = new Array();
                    Ext.each(specificDates, function(d, i) {
                        dateValues.push(d.getTime());
                    });
    
                    var css = cssClass || 'x-datepicker-eventdate';
                    var cells = this.getEl().select('a.x-date-date');
    
                    var filteredCells =
                    cells.filter(function(el, index) {
                        return (dateValues.indexOf(el.dom.dateValue) > -1);
                    });
                    filteredCells.addClass(css);
                    Ext.each(filteredCells.elements, function(e) {
                        e.childNodes[0].className = 'your-class-for-specific-dates';
                    })
                }
            });
    
            Ext.form.DateField.override({
                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());
                    this.menu.show(this.el, "tl-bl?");
                    this.menuEvents('on');
                    this.menu.picker.highlightDates(this.specificDates); //workaround
                }
            });     
        </script>
    
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Slate" />
        <ext:DateField runat="server" ID="df">
        </ext:DateField>
    </body>
    </html>
    Last edited by Daniil; Jul 23, 2010 at 6:59 PM.

Similar Threads

  1. How to disable dates in calendar
    By adrdomeniconi in forum 2.x Help
    Replies: 0
    Last Post: Apr 16, 2012, 12:55 PM
  2. [CLOSED] Styling dates in DateField control
    By rmelancon in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jan 27, 2012, 2:15 PM
  3. [CLOSED] How to disable all dates before today.
    By farisqadadeh in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 19, 2011, 10:46 AM
  4. [CLOSED] Disabling dates in DateField
    By daneel in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 07, 2011, 1:01 PM
  5. Problem with disable dates, when using culture setting
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 26, 2009, 10:25 AM

Tags for this Thread

Posting Permissions