What's New?

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

  1. #1
    Jul 12, 2010, 4:20 PM

    [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 1:01 AM.
  2. #2
    Jul 12, 2010, 9:45 PM
    Can you link to those forum threads?
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jul 12, 2010, 10:38 PM
    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
    Jul 12, 2010, 10:51 PM
    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
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Jul 13, 2010, 6:04 PM
    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
    Jul 13, 2010, 9:21 PM

    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
    Jan 13, 2012, 11:49 AM
    Hi @jchau,

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

Similar Threads

  1. [CLOSED] Trying to Highlight Panel, but it disappears after it highlighted, Any Ideas how I can highlight Panel instead of a DIV
    By Fahd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 07, 2012, 4: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, 9:52 AM
  3. [CLOSED] From-To Date Range
    By jeremyl in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 30, 2012, 9: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, 4:31 PM
  5. [CLOSED] Dates
    By Ben in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 07, 2009, 6:14 PM

Tags for this Thread

Posting Permissions