Currently selected day not indicated

[GoogleCodeExporter]

What steps will reproduce the problem?
1. using the test.html, select a date in the datepicker (it auto-closes)
2. click in the input field to display the datepicker
3. the current date value in the input field is not selected in the datepicker

What is the expected output? What do you see instead?
The selected day to be highlighted? No highlighting

What version of the product are you using? On what operating system?
Current as of today - not an OS issue

Please provide any additional information below.
Would be a nice additional parameter: 
highlightSelectedDate:true

Original issue reported on code.google.com by [email protected] on 11 Nov 2009 at 11:33

[GoogleCodeExporter]

I have a quick and dirty fix. A nicer fix would require a code rewrite - this 
code is
ugly as hell. But it does what I need and it is small enough so I can fix it if
needed. :)

I didn't add additional parameter - I see no need for it. If you want to turn 
it off
just change CSS.

Two changes:
-----
search for:

    /* Now the remaining weeks */
    var switchNextMonth = false;

and add BEFORE it:

    // let's highlight the selected date:
    var selectedDate=new Date();
    var
matches=this._currentDate.match(/^([0-9]{1,2})[./-]([0-9]{1,2})[./-]([0-9]{4})$/
);
    if (matches)
       selectedDate.setFullYear(matches[3], matches[2]-1, matches[1]);

-----

Then search for this: (about 10 lines lower)

  'today' : null

and replace it with:

  'today' :
  (
    ((daysIndex == this._currentDate.getDate()) &&
     (currentMonth  == this._currentDate.getMonth()) &&
     (currentYear == this._currentDate.getFullYear())) ? 'selected' : null
  )
-----

This fix will use CSS class 'today' on today's date and CSS class 'selected' on 
the
selected date. 

Then just edit CSS to add:
div.datepicker table tbody tr td.selected {
 background: #ff0000;
}
Well, do choose some nicer color... ;) 

Oops, almost forgot: I tried making sense of the date parsing functions of this
class, but I wasn't succesful. So the first fix manually parses the date - and
assumes it is in dd.mm.yyyy format. If it is not, you should change the 
setFullYear's
arguments (swap the first two if you have 'mm.dd.yyyy' or 'mm/dd/yyyy'). 

Hope it helps someone.

Original comment by [email protected] on 26 Nov 2009 at 10:19

[GoogleCodeExporter]

Thanks for this. Managed to fix it myself another way, along with quite a lot of
other modifications. - Have attached code in case anyone interested, which is 
pretty
consistent across all major browsers.
This also includes a check/fix so that if you are only allowing the user to 
select
dates in the future and the "selected date" is before the current month, then it
displays the current month, rather than the month of the selected date with no 
means
to go forward or back months (this is the behaviour without this fix).
Also includes a little code to populate dd/mm/yy dropdowns after a date is 
selected
as opposed to repopulating a standard input field.

You're probably only too aware that the whole thing would be better if it used
floated A tags (thus allowing a hover effect in all browsers) rather than table
cells, but that's a lot of work - might not be as smooth as the current display,
which is really quick.

Original comment by [email protected] on 26 Nov 2009 at 1:13

Attachments:

• preview.png
• datepicker.js
• datepicker.css
• test.html
• calendar-bg.gif
• calendar-month-bg.gif
• arrow-l.png
• arrow-r.png
• calendar.gif