I have something going on which doesn't seem always possible based on the client side event model because I can't guarantee the order of the events being fired. The situation is best explained with screen shots. The first image shows the form in question where a user is asked to supply a start and an end date for the scope of this vehicle expense report. When the value of the first grid is changing / has changed, I run a script to set the min date for the second combo box (can't end before you start). Then when the second combo is opening, we process that drop down to get the calendar, and spin through the days in the calendar. If the date exposed is less than the min date, then we disable the day, and change the cursor for that day to "not-allowed". Anyway, all of this works fine as long as you don't immediately click on the second date picker. Meaning, if you don't give the first box the chance to set the min date on the second control by not firing that event first, the logic on the second date picker doesn't know what it's min date is yet by the time it is opening the calendar. Should your flow be to set the first date, click on something else, then click on the second date, everything shows up correctly as in the last screen image.
In case you didn't follow that explanation, maybe some code will help:
<ig:WebDatePicker ID="wdcBegin" runat="server" NullText="mm/dd/yy" ClientSideEvents-ValueChanged="wdcBegin_CalendarValueChanged"> <Buttons> <CustomButton ImageUrl="~/Images/calendar/calendar.gif" /> </Buttons> </ig:WebDatePicker> </asp:TableCell>
<ig:WebDatePicker ID="wdcEnd" runat="server" NullText="mm/dd/yy" ClientSideEvents-CalendarOpened="wdcEnd_CalOpening" ClientSideEvents-ValueChanged="wdcEnd_CalendarValueChanged"> <Buttons> <CustomButton ImageUrl="~/Images/calendar/calendar.gif" /> </Buttons> </ig:WebDatePicker>
function wdcBegin_CalendarValueChanged(oCalendar, oDate, oEvent) { var gCombo = $find('wdcEnd'); var gBCombo = $find('wdcBegin'); var bDate = new Date(); bDate = gBCombo.get_date(); if (gCombo) { gCombo.set_minValue(bDate); if (gCombo.get_value()) { var oldEnd = new Date(); oldEnd = gCombo.get_date(); // if the old ending value is less than the new start date, set the new end date to the same // as the new start date // if (oldEnd < oDate) gCombo.set_value(bDate); // // // else leave the old end date alone. } // if no previous value for end date, then initialize with the same as the start date else gCombo.set_value(bDate); }}
function wdcEnd_CalOpening(oDateChooser, dropDownPanel, oEvent) { //debugger; processEndDate();}function processEndDate() { var gComboReturn = $find("wdcEnd"); if (gComboReturn) { if (gComboReturn.get_minValue()) { var mindate = new Date(gComboReturn.get_minValue()); if (mindate) { for (var i = 0; i < gComboReturn.get_calendar().get_days().length; i++) { var day = gComboReturn.get_calendar().get_days()[i]; var d1 = new Date(day.year, day.month - 1, day.day); if (d1 < mindate) { //day.element.disabled = true; day.element.style.color = "Red"; day.element.style.cursor = "not-allowed"; } else { day.element.disabled = false; day.element.style.color = "Blue"; day.element.style.cursor = "pointer"; } } } } }}
It seems I can't post multiple pictures. So, I will supply the second and third pictures via replies. The other note on this is that it doesn't matter if I choose the "*changing" or the "*changed" event on this, the behavior is the same.
This last picture shows the required look and feel, but it will not look like this if you immediately jump from the start combo to the end combo. It will look like this, if you open up the second combo a second time because the event for the first combo finally got a chance to fire.
Hello Alan,
Please let me know if I can provide any further assistance regarding this matter.
yeah, I can do that, but it seems awkward because of the default mask in the text area. So, in reality even though the text says "_3/_3/2013" for example, that value will not translate into a JavaScript date value suitable for doing comparisons with. So, what we have to do for the textchanged event, is do a new Date(object.get_value());
I will be out of the office for 10 days or so, and I will follow up when I get back.