Adding Date/Time picker to your web form:
Using date picker for input to Date/Time field always made my applications more user friendly and never bothered me and the users about formatting the date/time. It is very simple to add date picker into any of your web forms or search pages in ASP. Net. The built in calendar control comes out very handy.
Drag and drop a Text box (TextBox1) into your form and you can add either the image of calendar or add text with hyperlink to date picker page next to it.
![DatePicker](/images/articleimages/424/DatePicker.gif)
Now go to html view and change the codes as follows:
<asp:textbox id="TextBox1" style="Z-INDEX: 105; LEFT: 384px; POSITION: absolute; TOP: 56px" runat="server" Width="80px"></asp:textbox><STRONG> </STRONG><STRONG> <A href="javascript:calendar_window=window.open('calendar1.aspx?formname=Form1.TextBox1','calendar_window','width=154,height=188');calendar_window.focus()"><STRONG><IMG style="Z-INDEX: 106; LEFT: 472px; POSITION: absolute; TOP: 56px" src="button_date.gif"></STRONG></A>
Now, create another webform, name it calendar1.aspx and add the following codes on html page.
Add these codes in the head portion of html page:
<script runat="server">
Private Sub Calendar1_SelectionChanged(sender As Object, e As System.EventArgs)
Dim strjscript as string = "<script language=""javascript"">"
strjscript = strjscript & "window.opener." & Httpcontext.Current.Request.Querystring("formname") & ".value = '" & Calendar1.SelectedDate & "';window.close();"
strjscript = strjscript & "</script" & ">" 'Don't Ask, Tool Bug
Literal1.text = strjscript
End Sub
Private Sub Calendar1_DayRender(sender As Object, e As System.Web.UI.WebControls.DayRenderEventArgs)
If e.Day.Date = datetime.now().tostring("d") Then
e.Cell.BackColor = System.Drawing.Color.LightGray
End If
End Sub
</script>
And add the following codes in the body:
<body leftmargin="0" topmargin="0">
<form runat="server" ID="Form1">
<asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" OnDayRender="Calendar1_dayrender"
DayNameFormat="FirstLetter" BackColor="#FFFFCC" FirstDayOfWeek="Monday" BorderColor="#FFCC66"
ForeColor="#663399" Height="188px" Width="154px" BorderWidth="1px" Font-Size="8pt" Font-Names="Verdana"
ShowGridLines="True">
<TodayDayStyle ForeColor="White" BackColor="#FFCC66"></TodayDayStyle>
<SelectorStyle BackColor="#FFCC66"></SelectorStyle>
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC"></NextPrevStyle>
<DayHeaderStyle Height="1px" BackColor="#FFCC66"></DayHeaderStyle>
<SelectedDayStyle Font-Bold="True" BackColor="#CCCCFF"></SelectedDayStyle>
<TitleStyle Font-Size="9pt" Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></TitleStyle>
<OtherMonthDayStyle ForeColor="#CC9966"></OtherMonthDayStyle>
</asp:Calendar>
<asp:Literal id="Literal1" runat="server"></asp:Literal>
</form>
</body>
And that is it. You are ready to use your date picker to enter the date value through text box into your date/time field of database.