Thursday, December 29, 2011

dotnetnuke datepicker

Here is example how to implement datapicker in DotNetNuke:

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 !

try our new Dotnetnuke Module Generator for fast module creation.

1 comment: