Adding the ability to highlight and associate data with certain dates in the Datepicker
Hi,
I wasn't sure on the best way to go about proposing/demonstrating
this, so I figured this would be the best place to start.
A week or so ago, purely on a whim, I decided to see if I could use
the Datepicker as the basis for a calendar widget on a web page: a
small calendar where the dates that had some sort of event associated
with them could be distinguished or highlighted in some way. I ran
into two main obstacles:
--The process involved in "redrawing" the Datepicker (which happens a
lot) wipes out any previous style changes.
--There was no easy way to select/target a particular date on the
Datepicker calendar because the month and year are not coded within
the HTML of each date cell/link.
Through some trial-and-error, I came up with a slightly modified
version of the ui.datepicker.js file that addresses those obstacles
with just a few additional lines of code. The modifications are:
--The addition of an"afterRedraw" event, which occurs after the
calendar is redrawn by the internal updateDatepicker() function.
--The addition of the "alt" attribute to the hyperlink tags that
surround each date in the month, which contains the full date (month,
year, and day) for that day in whatever date format the Datepicker is
configured to use, making it easy to target a particular date using a
jQuery selector like $(".ui-datepicker a[alt='" + {date you want} +
"']")
I've posted a page that uses these modifications to select particular
dates on the Datepicker at http://www.swartzfager.org/blog/jQuery/modifiedDatepicker/
. The modified ui.datepicker.js file can be accessed directly at
http://www.swartzfager.org/blog/jQuery/modifiedDatepicker/ui.datepicker.modified.js,
and I made the modifications in that file easy to find (just do a text
search for "//MODIFIED").
Even though the Datepicker's primary purpose is to enhance the
usability of date fields in forms, I think adding the ability for
developers to highlight certain dates (holidays, deadlines, etc.)
would be a nice addition, and I think what I've done demonstrates that
adding that functionality (at least to the existing codebase) could be
pretty easy.
Thoughts? Feedback? Should I have gone about this differently?