Looking for a
simple datepicker that uses AJAX.NET (to avoid full-page postbacks), for your date fields? Look no further! I was on the same "hunt", and ended up writing my own code for it (inspired by other examples/code I was looking at).
The code does all the work using ASP:NET, nothing is done using JavaScript. Below is the code for the solution. This could (and should) be made into a UserControl if you need to use in more than one place
In the .aspx file, put this: (As you see, I am referencing a calendar icon here - use your own icon for this)
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="requestedDeliveryDateTextBox" runat="server" Width="100" />
<asp:ImageButton id="imageButton" runat="server" ImageUrl="~/Images/IconCalendar.png" AlternateText="calendar"
OnClick="ImageButton_Click" CausesValidation="false" />
<br />
<div id="calendar" class="calendar" visible="false" runat="server">
<asp:Calendar ID="requestedDeliveryDateCalendar" runat="server" OnSelectionChanged="RequestedDeliveryDateCalendar_SelectionChanged" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
In the code-behind (aspx.cs file):
/// <summary>
/// The calendar icon was clicked.
/// </summary>
protected void ImageButton_Click(object sender, EventArgs eventArgs)
{
// Toggle visibility of the calendar.
calendar.Visible = !calendar.Visible;
}
/// <summary>
/// The selected date in the calendar was changed. This method is called via AJAX.
/// </summary>
protected void RequestedDeliveryDateCalendar_SelectionChanged(object sender, EventArgs eventArgs)
{
requestedDeliveryDateTextBox.Text = BOMisc.GetDatePart(requestedDeliveryDateCalendar.SelectedDate);
// We hide the calendar here. You can disable this hiding by removing the following line.
calendar.Visible = false;
// Move the focus to the textbox below the calendar, to make things convenient for the user filling in the form.
// Remove this line or change it to reference your own control instead.
someTextBox.Focus();
}
And finally, the .css portion. We don't do very much styling of the actual calendar here, we just place it on top of the rest (the z-index part), with a white background to make sure the stuff below doesn't "shine through". We also make the calendar be absolutely positioned so that it becomes a true "dropdown" calendar (it will appear "on top" of everything else on the page).
.calendar
{
position: absolute;
width: 250px;
padding: 5px;
background-color: White;
border: 1px solid #858585;
z-index: 10;
}
That's it for now, hope this helps. Happy datepicking! :-