[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
  3. #3


    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

    Geoffrey McGill
  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">
        <style type="text/css">
                border: 1px solid #a3bad9;
                padding: 1px 4px;
        <script type="text/javascript">
            Ext.override(Ext.DatePicker, {
                highlightDates: function(dates, cssClass) {
                    var dateValues = new Array();
                    Ext.each(dates, function(d, i) {
                    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);
            Ext.onReady(function() {
                var dates = new Array();
                dates.push(new Date("7/15/2010"));
                dates.push(new Date("7/26/2010"));
        <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Slate" />
        <ext:DatePicker runat="server" ID="calendar">
  7. #7
    Hi @jchau,

    You might be interested in:
  8. #8
    Here is the adapted to Ext.NET v2 code.

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