locked
ajaxToolkit:CalendarExtender setting initial month displayed when calendar pops up RRS feed

  • Question

  • User1951951341 posted

    I have two textbox objects (FromDate and ToDate) on my page (in an UpdatePanel). Each is tied to separate CalendarExtender (CalendarExtenderFrom and CalendarExtenderTo). When I set a date value in the FromDate textbox that is some number of months in the past (I.E. 07/01/2013) I have code behind that sets the StartDate and EndDate on the ToDate's CalendarExtender. This does work to provide a range of dates for the ToDate's CalendarExtender's popup such that the user cannot select a date prior to the FromDate value. However, when I then click in the ToDate textbox the calendar opens in the current month (I.E. April 2014). I want it to open in July 2013.

    I know that if, in the code behind, I set CalendarExtenderTo.SelectedDate equal to the FromDate value then when I click in the ToDate's textbox the calendar opens in the month I want. However, I do not want the ToDate's textbox to display that date or any date. I want ToDate to remain empty until the user actually selects something from the popup calendar. 

    Is there some way to set the initial month/year a CalendarExtender displays without actually setting a value in the textbox associated with the CalendarExtender?

    Friday, April 25, 2014 10:53 AM

Answers

  • User2103319870 posted

    You can use the below code to set default month and year to calendar extendar.

      <script type="text/javascript">
            function calendarShown(sender, e) {
                sender.add_shown(function () {
                //Set your date here
                    var d = Date.parseLocale("01/07/2013", "dd/MM/yyyy");
                    sender.set_todaysDate(d);
                });
            }
        </script>

    Complete Code:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        
        <script type="text/javascript">
            function calendarShown(sender, e) {
                sender.add_shown(function () {
                //Set your date here
                    var d = Date.parseLocale("01/07/2013", "dd/MM/yyyy");
                    sender.set_todaysDate(d);
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:CalendarExtender ID="CalendarExtender1" runat="server" OnClientShowing="calendarShown"
            TargetControlID="TextBox1">
        </asp:CalendarExtender>
        </form>
    </body>
    </html>

     Rendered Output:

    EDIT: Added the Rendered Output

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 25, 2014 4:08 PM

All replies

  • User2103319870 posted

    You can use the below code to set default month and year to calendar extendar.

      <script type="text/javascript">
            function calendarShown(sender, e) {
                sender.add_shown(function () {
                //Set your date here
                    var d = Date.parseLocale("01/07/2013", "dd/MM/yyyy");
                    sender.set_todaysDate(d);
                });
            }
        </script>

    Complete Code:

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        
        <script type="text/javascript">
            function calendarShown(sender, e) {
                sender.add_shown(function () {
                //Set your date here
                    var d = Date.parseLocale("01/07/2013", "dd/MM/yyyy");
                    sender.set_todaysDate(d);
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:CalendarExtender ID="CalendarExtender1" runat="server" OnClientShowing="calendarShown"
            TargetControlID="TextBox1">
        </asp:CalendarExtender>
        </form>
    </body>
    </html>

     Rendered Output:

    EDIT: Added the Rendered Output

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 25, 2014 4:08 PM