[CLOSED] Styling dates in DateField control

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Styling dates in DateField control

    I am trying to Disable, Hilite, Color, etc individual dates on a date control. A co-worker posted this in a thread that was marked solved. I took the code from there and converted to VB but it doesn't seem to do anything. I am assuming that the dates loaded into "specificDates" (6/15/2010, 6/20/2010...) are supposed to show up formatted with the ".your-class-for-specific-dates" css style. So either I'm not understanding the example or something got lost in translation to VB.

    I converted the code from the following thread:

    http://forums.ext.net/showthread.php...eField-control

    Here is the converted code
    <script runat="server">
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            'A year in YYYY format, a month from 0 to 11, a day from 1 to 31
            Dim specificDates As [String] = "[" + "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)" + "]"
    
            Me.df.CustomConfig.Add(New Ext.Net.ConfigItem("specificDates", specificDates, Ext.Net.ParameterMode.Raw))
        End Sub
    
    </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 ID="ResourcePlaceHolder1" 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 geoffrey.mcgill; Aug 12, 2010 at 9:09 PM. Reason: [CLOSED]
  2. #2
    Hello, rmelancon!

    The big work has been doing by ExtJS and Ext.Net development teams every day. Refactoring, adding features, bug fixing...
    So, it needs to a little bit modify the solution. Please look at this.

    Example
    <%@ Page Language="C#" %>
     
    <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(2012, 0, 15)" +
                    ",new Date(2012, 0, 20)" +
                    ",new Date(2012, 0, 25)" +
                    ",new Date(2012, 1, 25)" +
                    ",new Date(2012, 2, 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 runat="server">
        <title>Ext.NET Example</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="ScriptFiles" />
     
        <script type="text/javascript">
            Ext.override(Ext.DatePicker, {
                highlightDates : function (specificDates, cssClass) {
                    specificDates = specificDates || this.specificDates;
                    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';
                    this.cssSpecificDates = css;
                    var cells = this.getEl().select('a.x-date-date');
                    cells.removeClass(this.cssSpecificDates);
                    Ext.each(cells.elements, function(e) {
                        e.childNodes[0].className = '';
                    })
                                         
                    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 (Ext.isEmpty(this.menu)) {
                        this.menu = new Ext.menu.DateMenu({
                            hideOnClick: 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))
                    });
     
                    if (this.cancelText) {
                        Ext.apply(this.menu.picker, { cancelText: this.cancelText });
                    }
     
                    if (this.dayNames) {
                        Ext.apply(this.menu.picker, { dayNames: this.dayNames });
                    }
     
                    if (this.monthNames) {
                        Ext.apply(this.menu.picker, { monthNames: this.monthNames });
                    }
     
                    if (this.monthYearText) {
                        Ext.apply(this.menu.picker, { monthYearText: this.monthYearText });
                    }
     
                    if (this.nextText) {
                        Ext.apply(this.menu.picker, { nextText: this.nextText });
                    }
     
                    if (this.okText) {
                        Ext.apply(this.menu.picker, { okText: this.okText });
                    }
     
                    if (this.prevText) {
                        Ext.apply(this.menu.picker, { prevText: this.prevText });
                    }
     
                    if (this.startDay) {
                        Ext.apply(this.menu.picker, { startDay: this.startDay });
                    }
     
                    if (this.todayText) {
                        Ext.apply(this.menu.picker, { todayText: this.todayText });
                    }
     
                    if (this.todayTip) {
                        Ext.apply(this.menu.picker, { todayTip: this.todayTip });
                    }
                     
                    //begin changes
                    if (this.specificDates) {
                        Ext.apply(this.menu.picker, { specificDates: this.specificDates });
                    }
                    this.menu.picker.showPrevMonth = this.menu.picker.showPrevMonth.createSequence(function() {
                        this.highlightDates()
                    });
                    this.menu.picker.showNextMonth = this.menu.picker.showNextMonth.createSequence(function() {
                        this.highlightDates()
                    });               
                    this.menu.picker.onMonthClick = this.menu.picker.onMonthClick.createSequence(
                                function(e,t) {
                                    var el = new Ext.Element(t);
                                    if (el.is('button.x-date-mp-ok')) {
                                        this.highlightDates()
                                    }
                                });               
                    //end changes
                     
                    this.menu.on(Ext.apply({}, this.menuListeners, {
                        scope: this
                    }));
                     
                    this.menu.picker.setValue(this.getValue() || new Date());
                    this.menu.show(this.el, "tl-bl?");
                    this.menuEvents("on");
                     
                    this.menu.picker.highlightDates(); //added
                }
            });    
        </script>
     
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:DateField runat="server" ID="df" />
    </body>
    </html>
    Last edited by Daniil; Jan 13, 2012 at 10:30 AM.
  3. #3
    Ok, so I understand that all of this is a work in progress. What is your example supposed to be showing me? When I run your example I get a date control and nothing is different than a "normal" date control. What are the dates in "specificDates" supposed to be showing me?
  4. #4
    Hi!

    Please see the attached screen-shot. The key point is cells with red dates and its border.
    Attached Thumbnails Click image for larger version. 

Name:	specificDates.jpg 
Views:	329 
Size:	44.5 KB 
ID:	1473  
  5. #5
    Ok, that's what I was expecting but this is what I get running that code:
    Attached Thumbnails Click image for larger version. 

Name:	Capture.JPG 
Views:	234 
Size:	17.3 KB 
ID:	1474  
  6. #6
    BTW - the C# version works, my VB conversion does not. The only coversion is the Page_Load:

    I've tried several different version of the specifiedDates string and none give the expected results.

        
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            'A year in YYYY format, a month from 0 to 11, a day from 1 to 31
            Dim specificDates As String = "[" & "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)" & "]"
            'Dim specificDates As [String] = "[" & "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)" + "]"
    
            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)]"
            Me.df.CustomConfig.Add(New Ext.Net.ConfigItem("specificDates", specificDates, Ext.Net.ParameterMode.Raw))
        End Sub
  7. #7
    Ok, it was a problem with the page load... I moved it into a code behind and magically things started working. So thanks for the help.
  8. #8
    Hi!
    I would like know if is possible implement the the DataField STYLE in to the DatePicker? I did some test, but not stylezed. I changed the attributes "DateField" to "DatePicker".
    Tks.
    Maia.
    Coolite 1.0
  9. #9
    Hi everybody,

    I've implemented a plugin to highlight dates in DatePicker and DateField.

    Example
    <%@ Page Language="C#" %>
     
    <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(2012, 0, 15)" +
                    ",new Date(2012, 0, 20)" +
                    ",new Date(2012, 0, 25)" +
                    ",new Date(2012, 1, 25)" +
                    ",new Date(2012, 2, 25)" +
                "]";
    
            ConfigItem dates = new ConfigItem("dates", specificDates, ParameterMode.Raw);
            ConfigItem cls = new ConfigItem("cls", "your-class-for-specific-dates", ParameterMode.Value);
    
            this.HighlightDates1.CustomConfig.Add(dates);
            this.HighlightDates1.CustomConfig.Add(cls);
    
            this.HighlightDates2.CustomConfig.Add(dates);
            this.HighlightDates2.CustomConfig.Add(cls);
        }
          
    </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 runat="server">
        <title>Ext.NET Example</title>
    
        <style type="text/css">
            a.your-class-for-specific-dates {
                color: red;
                border: 1px solid red;
                background-color: yellow;
            }
        </style>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
     
        <script type="text/javascript">
            Ext.ns("Ext.ux.DatePicker");
            Ext.ux.DatePicker.HighlightDates = Ext.extend(Object, {
                constructor : function (config) {
                    this.dates = config.dates;
                    this.cls = config.cls;
                },
    
                init : function (datePicker) {
                    var me = this;
                    if (datePicker instanceof Ext.DatePicker) {
                        datePicker.getHighlighDates = (function () {return this;}).createDelegate(me);
                        datePicker.highlightDates = me.highlightDates.createDelegate(datePicker);
                        datePicker.update = datePicker.update.createSequence(function () {
                            var highlighDates = this.getHighlighDates();
                            this.highlightDates(highlighDates.dates, highlighDates.cls);
                        });
                    } else if (datePicker instanceof Ext.form.DateField) {
                        datePicker.onTriggerClick = datePicker.onTriggerClick.createSequence(function () {
                            if (!me.gotHighlighDates) {
                                me.init(this.menu.picker);
                                this.menu.picker.highlightDates(me.dates, me.cls);
                                me.gotHighlighDates = true;
                            }
                        });
                    }
                },
    
                highlightDates : function (dates, cls) {
                    var dateValues = [],
                        el = this.getEl();
    
                    cells = el.select('a.x-date-date');
                    Ext.each(dates, function (d) {
                        dateValues.push(d.getTime());
                    });
    
                    cells.removeClass(cls);
     
                    cells.filter(function (el) {
                        return (dateValues.indexOf(el.dom.dateValue) > -1);
                    }).addClass(cls);
                }
            });
        </script>
     
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:DatePicker ID="DatePicker1" runat="server">
            <Plugins>
                <ext:GenericPlugin
                    ID="HighlightDates1" 
                    runat="server" 
                    InstanceName="Ext.ux.DatePicker.HighlightDates" />
            </Plugins>
        </ext:DatePicker>
        <ext:DateField ID="DateField1" runat="server">
            <Plugins>
                <ext:GenericPlugin
                    ID="HighlightDates2" 
                    runat="server" 
                    InstanceName="Ext.ux.DatePicker.HighlightDates" />
            </Plugins>
        </ext:DateField>
    </body>
    </html>
  10. #10
    Wonderful...

    works beautifully... thanks a lot, Daniil... you're the guy...

    if someone is trying to convert the code to VB.NET, do not forget to add the Handles Me.Load in the Page_Load, else the Page_Load not fired.

    Protected Overloads Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
            'A year in YYYY format, a month from 0 to 11, a day from 1 to 31
            Dim specificDates As String
            Dim dates As Ext.Net.ConfigItem
            Dim cls As Ext.Net.ConfigItem
            Dim msg As Ext.Net.MessageBox = New Ext.Net.MessageBox
    
            specificDates = "[new Date(2012, 0, 15), new Date(2012, 0, 20), new Date(2012, 0, 25), new Date(2012, 1, 25), new Date(2012, 2, 25)]"
                
            dates = New ConfigItem("dates", specificDates, ParameterMode.Raw)
            cls = New ConfigItem("cls", "your-class-for-specific-dates", ParameterMode.Value)
            Me.HighlightDates1.CustomConfig.Add(dates)
            Me.HighlightDates1.CustomConfig.Add(cls)
            Me.HighlightDates2.CustomConfig.Add(dates)
            Me.HighlightDates2.CustomConfig.Add(cls)
            
        End Sub
    Thanks a lot, again, Daniil
    Best regards
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Styling Composite Control
    By jthompson in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 01, 2011, 9:18 AM
  2. [CLOSED] Disabling dates in DateField
    By daneel in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 07, 2011, 12:01 PM
  3. Replies: 5
    Last Post: Sep 03, 2010, 8:19 PM
  4. [CLOSED] Disable specific dates and ranges in the DateField control
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 23, 2010, 5:56 PM
  5. Customize DateField control?
    By ydnah2 in forum 1.x Help
    Replies: 2
    Last Post: Sep 18, 2009, 9:30 AM

Tags for this Thread

Posting Permissions