Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
3521
WebDatePicker Event Model
posted

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";

                    }

                }

            }

        }

    }
}

Parents Reply Children