Step 1.Below os sample of the user control containing txtStartDate textbox and Image txtStartDateImage which is related to this textbox.
When user clicks on Image datepicker popup will appear and when user selects date this date will be entered into txtStartDate and datepicker popup will be closed.
Binding will be done in code-behind class of user control , see step 2 below.
<tr> <td valign="top" class="SubHead" style="width: 150px"> <dnn:Label ID="plStartDate" runat="server"></dnn:Label> </td> <td> <asp:TextBox ID="txtStartDate" runat="server" Width="74px" CssClass="NormalTextBox" MaxLength="100"></asp:TextBox> <asp:Image ID="txtStartDateImage" runat="server" ImageUrl="~/Images/Calendar.png" /> </td> <td> <asp:RequiredFieldValidator ID="rqdStartDate" runat="server" CssClass="NormalRed" ErrorMessage="<b>StartDate is required </b>" ControlToValidate="txtStartDate" resourcekey="rqdStartDate"></asp:RequiredFieldValidator> <asp:CompareValidator id="txtStartDateCorrectDate" runat="server" Type="Date" Operator="DataTypeCheck" ControlToValidate="txtStartDate" ErrorMessage="Please enter a valid date." resourcekey="txtStartDateCorrectDate" > </asp:CompareValidator> </td> </tr>
Step2. Binding in code behind, call this function on Page_load of the control or when you showing edit panel.
private void Bindpops() { path = DotNetNuke.Common.Utilities.Calendar.InvokePopupCal(txtStartDate); txtStartDateImage.Attributes.Add("OnClick", path); }
Don't forget to include instruction described in this post !