Ajax Toolkit Calendar Extender, Pops up twice after selection

Question

I am having very strange issue. I am using the Ajax Toolkit Calendar Extender. I have Update Panel - > ListView -> TextBox (AutoPostBack=Yes). If I type in box it will update to db then do update panel using code behind updatepanel.update(). This works fine. So I want to put calendar in the text field so I use Ajax Calendar Extender and call the target control ID of the textbox and when I am in there I click the textbox and calendar pops up then I choose date and textbox changes to new date then updates to db then postbacks, but the problem is the calendar pops up again after the postback. I need a way to hide that damn calendar after selecting date the first time.

<asp:TextBox ID="txtDespatchDate" runat="server" CssClass="tblDespContTxtLst" Text='<%# Eval("DescDespatchDate") %>' Width="70px" AutoPostBack="True" OnTextChanged="updDespatchLine" AutoComplete="Off" />

<ajaxToolkit:CalendarExtender ID="calDespatchDate" runat="server" CssClass="Calendar" Format="dd/MM/yyyy" PopupPosition="BottomLeft" TargetControlID="txtDespatchDate"  />

score 0 · Accepted Answer · answered Aug 22 '17 at 10:41

I figured this one out a long time ago, and being on a server and all and doing postbacks I couldnt get around it using the ajax extender, so I have to use JQuery, I did something like this;

Code Behind

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   ScriptManager.RegisterStartupScript(NameOfUpdatePanel, Me.GetType, "SuperCalendar", "$( function() {
      $('.Calendar').datepicker({ dateFormat: 'dd/mm/yy'}); } );", True)
End Sub

ASP Page

<asp:UpdatePanel ID="NameOfUpdatePanel" runat="server" UpdateMode="Conditional">
   <ContentTemplate>
      <asp:TextBox ID="txtBox1" runat="server" CssClass="Calendar" />
   </ContentTemplate>
</asp:UpdatePanel>

You need to add the latest JQuery Header to the top of your page like;

<script src="../Scripts/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>

All you have to do is every time you want a date popup you just add the Calendar Class to it so;

CssClass="SomeTextBoxClass Calendar"

I dont get any problems after postbacks with it popping up anymore.

Ajax Toolkit Calendar Extender, Pops up twice after selection

1 Answers1