Vinod Kumar, a co-host of this site, would be
showcasing some new .NET utility under the title "Cool .NET Utilities" every
week. Vinod is a Microsoft MVP, he is been continuously contributing technical
articles for various sites and have co-authored few books on .Net technologies.
This week he brings an article on how to build date picker to the viewers. Go
ahead, read, enjoy and wait for more to come...
In classical asp, building a date picker type page is
not an easy task, it requires lot of date validating client side JavaScript
code, but with the availability of ASP.NET Calendar Server Control, developing
this kind of utility needs very few lines of
code.
<asp:Calendar
id="Calendar1"
runat="server"
DayNameFormat="Short"
SelectionMode="DayWeekMonth"
Font-Name="Verdana;Arial"
Font-Size="12px"
Height="180px" Width="230px"
TodayDayStyle-Font-Bold="True"
DayHeaderStyle-Font-Bold="True"
/>
The figure below shows the date picker web
page
In our Date Picker Web Form
(CalControl.aspx)
we place a Calendar Server Control (Calendar1) and an HTML Hidden Server control
(txtDate).
We will also add 3 lines of server-side code and a few lines of JavaScript Code
for validation.
Private Sub
Calendar1_SelectionChanged(ByVal sender As Object,
ByVal e As
System.EventArgs)
Handles
Calendar1.SelectionChanged
If
Calendar1.SelectedDates.Count = 1
Then
txtDate.Value =
Calendar1.SelectedDate.ToShortDateString
End
If
End
Sub
The
Calendar1_SelectionChanged
event triggers whenever a user selects a date and the selected date is set to
the hidden text field txtDate.
function
CalScript()
{
if
(!(Form1.txtDate.value==""))
{
window.opener.<%=Request("fn")%>.<%=Request("tn")%>.value=Form1.txtDate.value
window.close()
}
}
When CalControl.aspx populates from a parent window
(like Default.aspx), the JavaScript function
CalScript()
triggers a Body
Onload
event and checks for a value in the hidden text field
txtDate
(by default no value). If found it will set the value fn (Form Name) and
tn
(textbox Name) from the Parent window to the JavaScript code. When a user
selects a date, the txtDate field will be populated with the selected date.
CalControl.aspx will reload this, make the function CalScript() trigger again
and will set the value in the hidden file to the text field (where the date
value should be filled) in the parent window. The Date Picker (CalControl.aspx)
window will then be
closed.
function
_DatePickerOpener(varfn,vartn)
{
var
OpenCal;
OpenCal="CalControl.aspx?fn="+varfn+"&tn="+vartn
window.open(OpenCal,"Noname",scrollbars=yes,status=no,width=275,
height=220,resizable=yes,top=0')
}
The above JavaScript function opens the web page
CalControl.aspx, this function should be added in the parent
window.
<a
href="javascript:_DatePickerOpener('Form1','txtMyDate');"></a>
Form name and the control name for which date as to be
picked, should be passed as arguments.
Next week I will showcase another cool utility in
.Net. For your feedback and suggestions mail me at vinod@dotnetforce.com. If you
like to showcase any similar product, developed by you in this section contact
me at the above mention email id.