[CLOSED] How to highlight a range of dates in datepicker???

  1. #1

    [CLOSED] How to highlight a range of dates in datepicker???

    I have seen this question asked alot in ExtJS forum and also once in here but no one has provided an elegant solution. So far, the only solution I found is to completely override the long and bloated private update method in DatePicker class and mimic how disabled date works.

    I dont think that's elegant or permanent since that method can be changed with new releases.

    Does Ext.NET have a better solution in mind? Ideally, there would be a new method to highlight an array of dates. Adding multiselect will be nice too =).
    Last edited by geoffrey.mcgill; Jul 15, 2010 at 2:01 AM.
  2. #2
    Can you link to those forum threads?
    Geoffrey McGill
    Founder
  3. #3
    http://www.sencha.com/forum/archive/...p/t-59108.html

    http://www.sencha.com/forum/archive/...p/t-65446.html

    http://www.extjs.com/forum/showthread.php?t=31553 <-- this is the user extension that has multiple selection but i just need a stripped down version of it
  4. #4
    Best I can tell there is no built in functionality for this, so you'll have to use one of the suggestions from the Ext JS forums.

    The following forum post seems like a straightforward solution without the need to override too much, see

    http://www.sencha.com/forum/showthre...-in-DatePicker
    Geoffrey McGill
    Founder
  5. #5
    Do you know when the new ExtJS 3.3 calendar component will be available? I want to see if I should wait for that instead of reinventing the wheel with the current datepicker.
  6. #6

    A simple solution!

    My requirement is to just highlight a few dates. So I found a solution just using simple css and dom query. This is not the optimal solution in terms of performance and flexibility but it works for my use cases.

        <!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;
            }
        </style>
    </head>
    <body>
    
        <script type="text/javascript">
            Ext.override(Ext.DatePicker, {
                highlightDates: function(dates, cssClass) {
                    var dateValues = new Array();
                    Ext.each(dates, function(d, i) {
                        dateValues.push(d.getTime());
                    });
    
                    var css = cssClass || 'x-datepicker-eventdate';
                    var cells = this.getEl().select('a.x-date-date');
    
                    cells.filter(function(el, index) {
                        return (dateValues.indexOf(el.dom.dateValue) > -1);
                    }).addClass(css);
    
                }
            });
    
            Ext.onReady(function() {
                var dates = new Array();
                dates.push(new Date("7/15/2010"));
                dates.push(new Date("7/26/2010"));
                calendar.highlightDates(dates);
            });
        </script>
    
        <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Slate" />
        <ext:DatePicker runat="server" ID="calendar">
        </ext:DatePicker>
    </body>
    </html>
  7. #7
    Hi @jchau,

    You might be interested in:
    http://forums.ext.net/showthread.php...ll=1#post72450
  8. #8
    Here is the adapted to Ext.NET v2 code.
    http://forums.ext.net/showthread.php...ll=1#post73480

Similar Threads

  1. Replies: 2
    Last Post: Jun 07, 2012, 5:29 PM
  2. [CLOSED] From to date range
    By Raynald_Fontaine in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 30, 2012, 10:52 AM
  3. [CLOSED] From-To Date Range
    By jeremyl in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 30, 2012, 10:52 AM
  4. [CLOSED] Select multiple dates in a datepicker
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 08, 2010, 5:31 PM
  5. [CLOSED] Dates
    By Ben in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 07, 2009, 7:14 PM

Tags for this Thread

Posting Permissions