jQuery 'setDate' = null leaves today as the currentDate

Question

I have two date pickers. When they are first displayed on the page the max and min for the range are set to today so that no dates can be selected. Based on a drop down selection, the valid date ranges are set on both calendars. I want TODAY to be the default, selected date in the TO date picker and in the FROM datepicker I'd like nothing to be selected. I have added a bit of CSS to highlight TODAY as if it was any other selected date. All is well in the TO calendar at this point. In the FROM calendar, however, TODAY is displayed as if it was picked, but in reality no date has been picked at this time. The issue seems to be that even if you set the date of a datepicker to 'null', todays date is still marked as ui-datepicker-current-date as well as ui-datepicker-today. I have no problem with it being marked as ui-datepicker-today, because, well, it IS after all today. With it also being marked as ui-datepicker-current-date, I have no way of differentiating the unselected date in the TO calendar with one that has actually been selected by the user.

Has anyone figured out how to make this work? The selectors added to a user selected date and a non-selected date appear to be the same. Both are marked at today and current date and both are ui-active.

I can post the exact code tomorrow if you are completely lost. It's at work and I'm researching at home at the moment. Thanks in advance for any help you can offer!

Answer 1

Now that I've spent way more time than I had planned on this, I'll share my final solution.

I'm still not happy about the fact that datePicker marks today as the currently selected date, effectively preventing you from having a datePicker with no selected date, but I still had to make it work. Here is the CSS I have added, you can include this as a seperate file or however you'd like, as long as it comes after the jquery theme CSS:

.ui-datepicker-current-day .ui-state-active { border: 1px solid #000; background: #bebbbb url(images/ui-bg_glass_65_bebbbb_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; outline: none; }

This basically overrides all of the styles that have been applied to this day being today, and makes it look exactly like any other selected day. Next is the javascript to prevent the default date from appearing selected:

$("#nameOfDatePickerDiv").find("td.ui-datepicker-current-day").find("a:first-child").removeClass('ui-state-active');

First of all this is done after the valid range is set and before the user is allowed to make a selection on their own. I find the current-day td, find the first, and only, a, and strip it of it's activeness. Now you have a calendar that has a current day, default today, but doesn't fool the user into thinking it's been pre-selected. Once they make the selection on their own, the ui-state-active class will be added to that date. With the updated style and without this JS, today will always appear as if it had been pre-selected.

If anyone finds a better way feel free to share. I spent way too much time on this and wouldnt't be suprised if I missed something more obvious.