Setting correct date on asp.net calendar extender

Question

I have a simple objective. I can simulate the problem by creating a clean project.

The problem is that I cant set the asp.net calendarExtender display date (when opened) correctly when setting the date on the text box dynamically.

Here is a code:

HTML:

<asp:Button 
    ID="Button1" 
    runat="server" 
    Text="2013" 
    OnClientClick="SetDate(0);return false;" />

<asp:Button 
    ID="Button2" 
    runat="server" 
    Text="2015" 
    OnClientClick="SetDate(1);return false;" />

<br />

<asp:TextBox 
    runat="server" 
    ID="tbDate"></asp:TextBox>

<asp:CalendarExtender 
    ID="clDate" 
    runat="server" 
    Enabled="True" 
    BehaviorID="calendarExtender"
    TargetControlID="tbDate">
</asp:CalendarExtender>

JavaScript:

var Data = (function () {
    var _items = [{ ID: 1, Date: "19/12/2013" },
                    { ID: 2, Date: "19/12/2015" }];

    function _GetAll() {                                        
        return _items;
    }

    function _GetByID(itemID) {
        var o = $.grep(_items, function (el, i) {
            return el.ID === itemID;
        });

        return o[0];
    }

    return {
        GetByID: _GetByID,
        GetAll: _GetAll
    }
})();

function SetDate(itemID) {

    var item = Data.GetByID(itemID);

    var stringDate = item.Date;
    var objectDate = Date.parseLocale(item.Date, "dd/MM/yyyy");

    $("#tbDate").val(stringDate);

    $find("calendarExtender").set_selectedDate(objectDate);

}

This should be as simple as it gets, but the control seams to have its own behavior. From what I conclude, the display date (when opened) it always assumes the last chosen date. No matter what you do.

Some scenarious:

• SCENARIO 1

  1-load page

  2-click on the textbox, opening the calendar extender.

  3-calendar extender assumes current date.

  4-click on 2013 button, textbox is updated to 2013 date.

  5-cick on the textbox, opening the calendar extender.....still has 2014(current date)

• SCENARIO 2

  1-load page 2-click on 2013 button, textbox is updated to 2013 date.

  3-click on the textbox, opening the calendar extender.

  4-calendar extender assumes 2013 (correct date).

  5-click on 2015 button, textbox is updated to 2015 date.

  3-click on the textbox, opening the calendar extender.....still has 2013(first date)

• SCENARIO 3

  (same as 2 but starting with button 2015 click)

• SCENARIO 4

  1-load page

  2-click on 2013 button, textbox is updated to 2013 date (DO NOT CLICK ON TEXT BOX).

  3-click on 2015 button, textbox is updated to 2015 date.

  4-click on the textbox, opening the calendar extender.....assumes 2015(last date)

NOTE: if I display the current set date dynamically with

alert($find("calendarExtender").get_selectedDate());

, its correct. But the display simply wont refresh.

Is this the correct behavior? Am I missing something?

How can I make it assume the correct date?

Answer 1

Ok, I did a little more testing and found that the visualization only gets updated when a post back occurs.

Since I was trying to avoid post backs.....ill just go for the jquery datepicker.