How to add calendar to input field?

.NET
1

Hi,

I want to have an input control for calendars and next to a calendar button that users click on it it will pop up a calendar and when the user selects a date, it will populate the input form with the date. can anyone advise me of some tutrials or similar examples I can follow?

I have found one on this link:

http://www.discountedtravels.co.uk/holidays.aspx

the example in the link above uses drop downs for month and day. I only need one input field. either asp.not or javascripts whichever is easier

Thanks

2

Use this as CalendarControl.js as external file

//Start of javascript file
var winCal;
var dtToday=new Date();
var Cal;
var docCal;
var MonthName=[“January”, “February”, “March”, “April”, “May”, “June”,“July”,
“August”, “September”, “October”, “November”, “December”];
var WeekDayName=[“Sunday”,“Monday”,“Tuesday”,“Wednesday”,“Thursday”,“Friday”,“Saturday”];
var exDateTime;//Existing Date and Time

//Configurable parameters
var cnTop=“200”;//top coordinate of calendar window.
var cnLeft=“500”;//left coordinate of calendar window
var WindowTitle =“DateTime Picker”;//Date Time Picker title.
var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
var CellWidth=20;//Width of day cell.
var DateSeparator=“/”;//Date Separator, you can change it to “/” if you want.
var TimeMode=24;//default TimeMode value. 12 or 24

var ShowLongMonth=true;//Show long month name in Calendar header. example: “January”.
var ShowMonthYear=true;//Show Month and Year in Calendar header.
var MonthYearColor=“#cc0033”;//Font Color of Month and Year in Calendar header.
var WeekHeadColor=“#0099CC”;//Background Color in Week header.
var SundayColor=“#6699FF”;//Background color of Sunday.
var SaturdayColor=“#CCCCFF”;//Background color of Saturday.
var WeekDayColor=“white”;//Background color of weekdays.
var FontColor=“blue”;//color of font in Calendar day cell.
var TodayColor=“#FFFF33”;//Background color of today.
var SelDateColor=“#FFFF99”;//Backgrond color of selected date in textbox.
var YrSelColor=“#cc0033”;//color of font of Year selector.
var ThemeBg=“”;//Background image of Calendar window.
//end Configurable parameters
//end Global variable

function ShowCalendar(pCtrl,pFormat,pShowTime,pTimeMode)
{
Cal=new Calendar(dtToday);
if ((pShowTime!=null) && (pShowTime))
{
Cal.ShowTime=true;
if ((pTimeMode!=null) &&((pTimeMode==‘12’)||(pTimeMode==‘24’)))
{
TimeMode=pTimeMode;
}
}
if (pCtrl!=null)
Cal.Ctrl=pCtrl;
if (pFormat!=null)
Cal.Format=pFormat.toUpperCase();

exDateTime=document.getElementById(pCtrl).value;
if (exDateTime!="")//Parse Date String
{
	var Sp1;//Index of Date Separator 1
	var Sp2;//Index of Date Separator 2
	var tSp1;//Index of Time Separator 1
	var tSp1;//Index of Time Separator 2
	var strMonth;
	var strDate;
	var strYear;
	var intMonth;
	var YearPattern;
	var strHour;
	var strMinute;
	var strSecond;
	//parse month
	Sp1=exDateTime.indexOf(DateSeparator,0)
	Sp2=exDateTime.indexOf(DateSeparator,(parseInt(Sp1)+1));
	
	if ((Cal.Format.toUpperCase()=="DDMMYYYY") || (Cal.Format.toUpperCase()=="DDMMMYYYY"))
	{
		strMonth=exDateTime.substring(Sp1+1,Sp2);
		strDate=exDateTime.substring(0,Sp1);
	}
	else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY"))
	{
		strMonth=exDateTime.substring(0,Sp1);
		strDate=exDateTime.substring(Sp1+1,Sp2);
	}
	if (isNaN(strMonth))
		intMonth=Cal.GetMonthIndex(strMonth);
	else
		intMonth=parseInt(strMonth,10)-1;	
	if ((parseInt(intMonth,10)>=0) && (parseInt(intMonth,10)<12))
		Cal.Month=intMonth;
	//end parse month
	//parse Date
	if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (parseInt(strDate,10)>=1))
		Cal.Date=strDate;
	//end parse Date
	//parse year
	strYear=exDateTime.substring(Sp2+1,Sp2+5);
	YearPattern=/^\\d{4}$/;
	if (YearPattern.test(strYear))
		Cal.Year=parseInt(strYear,10);
	//end parse year
	//parse time
	if (Cal.ShowTime==true)
	{
		tSp1=exDateTime.indexOf(":",0)
		tSp2=exDateTime.indexOf(":",(parseInt(tSp1)+1));
		strHour=exDateTime.substring(tSp1,(tSp1)-2);
		Cal.SetHour(strHour);
		strMinute=exDateTime.substring(tSp1+1,tSp2);
		Cal.SetMinute(strMinute);
		strSecond=exDateTime.substring(tSp2+1,tSp2+3);
		Cal.SetSecond(strSecond);
	}	
}
winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,location =0 ,fullscreen=no,width=195,height=245,resizable=0,top="+cnTop+",left="+cnLeft);
docCal=winCal.document;
RenderCal();

}

function RenderCal()
{
var vCalHeader;
var vCalData;
var vCalTime;
var i;
var j;
var SelectStr;
var vDayCount=0;
var vFirstDay;

docCal.open();
docCal.writeln("<html><head><title>"+WindowTitle+"</title>");
docCal.writeln("<script>var winMain=window.opener;</script>");
docCal.writeln("</head><body background='"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");

vCalHeader="<table border=1 cellpadding=1 cellspacing=1 width='100%' align=\\"center\\" valign=\\"top\\">\

“;
//Month Selector
vCalHeader+=”<tr>
<td colspan=‘7’><table border=0 width=‘100%’ cellpadding=0 cellspacing=0><tr><td align=‘left’>
“;
vCalHeader+=”<select name=\“MonthSelector\” onChange=\“javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\”>
“;
for (i=0;i<12;i++)
{
if (i==Cal.Month)
SelectStr=“Selected”;
else
SelectStr=”“;
vCalHeader+=”<option “+SelectStr+” value >“+MonthName[i]+”
“;
}
vCalHeader+=”</select></td>“;
//Year selector
vCalHeader+=”
<td align=‘right’><a href=\“javascript:winMain.Cal.DecYear();winMain.RenderCal()\”><b><font color=\“”+YrSelColor+“\”><</font></b></a><font face=\“Verdana\” color=\“”+YrSelColor+“\” size=2><b> “+Cal.Year+” </b></font><a href=\“javascript:winMain.Cal.IncYear();winMain.RenderCal()\”><b><font color=\“”+YrSelColor+“\”>></font></b></a></td></tr></table></td>
“;
vCalHeader+=”</tr>“;
//Calendar header shows Month and Year
if (ShowMonthYear)
vCalHeader+=”<tr><td colspan=‘7’><font face=‘Verdana’ size=‘2’ align=‘center’ color=‘“+MonthYearColor+”’><b>“+Cal.GetMonthName(ShowLongMonth)+” “+Cal.Year+”</b></font></td></tr>
“;
//Week day header
vCalHeader+=”<tr bgcolor=“+WeekHeadColor+”>“;
for (i=0;i<7;i++)
{
vCalHeader+=”<td align=‘center’><font face=‘Verdana’ size=‘2’>“+WeekDayName[i].substr(0,WeekChar)+”</font></td>“;
}
vCalHeader+=”</tr>";
docCal.write(vCalHeader);

//Calendar detail
CalDate=new Date(Cal.Year,Cal.Month);
CalDate.setDate(1);
vFirstDay=CalDate.getDay();
vCalData="&lt;tr&gt;";
for (i=0;i&lt;vFirstDay;i++)
{
	vCalData=vCalData+GenCell();
	vDayCount=vDayCount+1;
}
for (j=1;j&lt;=Cal.GetMonDays();j++)
{
	var strCell;
	vDayCount=vDayCount+1;
	if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear()))
		strCell=GenCell(j,true,TodayColor);//Highlight today's date
	else
	{
		if (j==Cal.Date)
		{
			strCell=GenCell(j,true,SelDateColor);
		}
		else
		{	
			if (vDayCount%7==0)
				strCell=GenCell(j,false,SaturdayColor);
			else if ((vDayCount+6)%7==0)
				strCell=GenCell(j,false,SundayColor);
			else
				strCell=GenCell(j,null,WeekDayColor);
		}		
	}						
	vCalData=vCalData+strCell;

	if((vDayCount%7==0)&&(j&lt;Cal.GetMonDays()))
	{
		vCalData=vCalData+"&lt;/tr&gt;\

<tr>“;
}
}
docCal.writeln(vCalData);
//Time picker
if (Cal.ShowTime)
{
var showHour;
showHour=Cal.getShowHour();
vCalTime=”<tr>
<td colspan=‘7’ align=‘center’>“;
vCalTime+=”<input type=‘text’ name=‘hour’ maxlength=2 size=1 style=\“WIDTH: 22px\” value=“+showHour+” onchange=\“javascript:winMain.Cal.SetHour(this.value)\”>“;
vCalTime+=” : “;
vCalTime+=”<input type=‘text’ name=‘minute’ maxlength=2 size=1 style=\“WIDTH: 22px\” value=“+Cal.Minutes+” onchange=\“javascript:winMain.Cal.SetMinute(this.value)\”>“;
vCalTime+=” : “;
vCalTime+=”<input type=‘text’ name=‘second’ maxlength=2 size=1 style=\“WIDTH: 22px\” value=“+Cal.Seconds+” onchange=\“javascript:winMain.Cal.SetSecond(this.value)\”>“;
if (TimeMode==12)
{
var SelectAm =(parseInt(Cal.Hours,10)<12)? “Selected”:”“;
var SelectPm =(parseInt(Cal.Hours,10)>=12)? “Selected”:”";

		vCalTime+="&lt;select name=\\"ampm\\" onchange=\\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\\"&gt;";
		vCalTime+="&lt;option "+SelectAm+" value=\\"AM\\"&gt;AM&lt;/option&gt;";
		vCalTime+="&lt;option "+SelectPm+" value=\\"PM\\"&gt;PM&lt;option&gt;";
		vCalTime+="&lt;/select&gt;";
	}	
	vCalTime+="\

</td>
</tr>“;
docCal.write(vCalTime);
}
//end time picker
docCal.writeln(”
</table>“);
docCal.writeln(”</form></body></html>");
docCal.close();
}

function GenCell(pValue,pHighLight,pColor)//Generate table cell with value
{
var PValue;
var PCellStr;
var vColor;
var vHLstr1;//HighLight string
var vHlstr2;
var vTimeStr;

if (pValue==null)
	PValue="";
else
	PValue=pValue;

if (pColor!=null)
	vColor="bgcolor=\\""+pColor+"\\"";
else
	vColor="";	
if ((pHighLight!=null)&&(pHighLight))
	{vHLstr1="color='red'&gt;&lt;b&gt;";vHLstr2="&lt;/b&gt;";}
else
	{vHLstr1="&gt;";vHLstr2="";}	

if (Cal.ShowTime)
{
	vTimeStr="winMain.document.getElementById('"+Cal.Ctrl+"').value+=' '+"+"winMain.Cal.getShowHour()"+"+':'+"+"winMain.Cal.Minutes"+"+':'+"+"winMain.Cal.Seconds";
	if (TimeMode==12)
		vTimeStr+="+' '+winMain.Cal.AMorPM";
}	
else
	vTimeStr="";		
PCellStr="&lt;td "+vColor+" width="+CellWidth+" align='center'&gt;&lt;font face='verdana' size='2'"+vHLstr1+"&lt;a href=\\"javascript:winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\\"&gt;"+PValue+"&lt;/a&gt;"+vHLstr2+"&lt;/font&gt;&lt;/td&gt;";
return PCellStr;

}

function Calendar(pDate,pCtrl)
{
//Properties
this.Date=pDate.getDate();//selected date
this.Month=pDate.getMonth();//selected month number
this.Year=pDate.getFullYear();//selected year in 4 digits
this.Hours=pDate.getHours();

if (pDate.getMinutes()&lt;10)
	this.Minutes="0"+pDate.getMinutes();
else
	this.Minutes=pDate.getMinutes();

if (pDate.getSeconds()&lt;10)
	this.Seconds="0"+pDate.getSeconds();
else		
	this.Seconds=pDate.getSeconds();
	
this.MyWindow=winCal;
this.Ctrl=pCtrl;
this.Format="ddMMyyyy";
this.Separator=DateSeparator;
this.ShowTime=false;
if (pDate.getHours()&lt;12)
	this.AMorPM="AM";
else
	this.AMorPM="PM";

}

function GetMonthIndex(shortMonthName)
{
for (i=0;i<12;i++)
{
if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase())
{ return i;}
}
}
Calendar.prototype.GetMonthIndex=GetMonthIndex;

function IncYear()
{ Cal.Year++;}
Calendar.prototype.IncYear=IncYear;

function DecYear()
{ Cal.Year–;}
Calendar.prototype.DecYear=DecYear;

function SwitchMth(intMth)
{ Cal.Month=intMth;}
Calendar.prototype.SwitchMth=SwitchMth;

function SetHour(intHour)
{
var MaxHour;
var MinHour;
if (TimeMode==24)
{ MaxHour=23;MinHour=0}
else if (TimeMode==12)
{ MaxHour=12;MinHour=1}
else
alert(“TimeMode can only be 12 or 24”);
var HourExp=new RegExp(“^\\d\\d$”);
if (HourExp.test(intHour) && (parseInt(intHour,10)<=MaxHour) && (parseInt(intHour,10)>=MinHour))
{
if ((TimeMode==12) && (Cal.AMorPM==“PM”))
{
if (parseInt(intHour,10)==12)
Cal.Hours=12;
else
Cal.Hours=parseInt(intHour,10)+12;
}
else if ((TimeMode==12) && (Cal.AMorPM==“AM”))
{
if (intHour==12)
intHour-=12;
Cal.Hours=parseInt(intHour,10);
}
else if (TimeMode==24)
Cal.Hours=parseInt(intHour,10);
}
}
Calendar.prototype.SetHour=SetHour;

function SetMinute(intMin)
{
var MinExp=new RegExp(“^\\d\\d$”);
if (MinExp.test(intMin) && (intMin<60))
Cal.Minutes=intMin;
}
Calendar.prototype.SetMinute=SetMinute;

function SetSecond(intSec)
{
var SecExp=new RegExp(“^\\d\\d$”);
if (SecExp.test(intSec) && (intSec<60))
Cal.Seconds=intSec;
}
Calendar.prototype.SetSecond=SetSecond;

function SetAmPm(pvalue)
{
this.AMorPM=pvalue;
if (pvalue==“PM”)
{
this.Hours=(parseInt(this.Hours,10))+12;
if (this.Hours==24)
this.Hours=12;
}
else if (pvalue==“AM”)
this.Hours-=12;
}
Calendar.prototype.SetAmPm=SetAmPm;

function getShowHour()
{
var finalHour;
if (TimeMode==12)
{
if (parseInt(this.Hours,10)==0)
{
this.AMorPM=“AM”;
finalHour=parseInt(this.Hours,10)+12;
}
else if (parseInt(this.Hours,10)==12)
{
this.AMorPM=“PM”;
finalHour=12;
}
else if (this.Hours>12)
{
this.AMorPM=“PM”;
if ((this.Hours-12)<10)
finalHour=“0”+((parseInt(this.Hours,10))-12);
else
finalHour=parseInt(this.Hours,10)-12;
}
else
{
this.AMorPM=“AM”;
if (this.Hours<10)
finalHour=“0”+parseInt(this.Hours,10);
else
finalHour=this.Hours;
}
}
else if (TimeMode==24)
{
if (this.Hours<10)
finalHour=“0”+parseInt(this.Hours,10);
else
finalHour=this.Hours;
}
return finalHour;
}
Calendar.prototype.getShowHour=getShowHour;

function GetMonthName(IsLong)
{
var Month=MonthName[this.Month];
if (IsLong)
return Month;
else
return Month.substr(0,3);
}
Calendar.prototype.GetMonthName=GetMonthName;

function GetMonDays()//Get number of days in a month
{
var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if (this.IsLeapYear())
{
DaysInMonth[1]=29;
}
return DaysInMonth[this.Month];
}
Calendar.prototype.GetMonDays=GetMonDays;

function IsLeapYear()
{
if ((this.Year%4)==0)
{
if ((this.Year%100==0) && (this.Year%400)!=0)
{
return false;
}
else
{
return true;
}
}
else
{
return false;
}
}
Calendar.prototype.IsLeapYear=IsLeapYear;

function FormatDate(pDate)
{
if (this.Format.toUpperCase()==“DDMMYYYY”)
return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year);
else if (this.Format.toUpperCase()==“DDMMMYYYY”)
return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);
else if (this.Format.toUpperCase()==“MMDDYYYY”)
return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year);
else if (this.Format.toUpperCase()==“MMMDDYYYY”)
return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);
}
Calendar.prototype.FormatDate=FormatDate;

//End of Javascript File

Add this is aspx design page

	&lt;script language="javascript" src="CalendarControl.js"&gt;&lt;/script&gt;

<asp:TextBox>

</asp:textbox>

<A href=“[B]javascript:ShowCalendar/B”><IMG height=“16” alt=“Pick a date” src=“images/calendar2.gif” width=“16” border=“0”></A>

3

@aleserlee. You might want to wrap your code in [ code ] blocks so that is does not push the page so far down. Or [highlight ] blocks.

You can also google “jQuery datepicker” there should be tons of plugins with tons of examples on how to implement it. You usually et the .js plugin and a .css file used for styling so that you can easily change the styles to match ur site.

4

jquery rocks … $(‘.date’).datepicker(); voilá

5

Thanks guys. I tried to implement the example given by aleserlee but when clicking on the calendar nothing happens. do i need to add an id in the input field?

6

Why not use the .NET (Ajax) way?

Ajax Control Toolkit Calender Extender

7

verschha: The example given seems elegant. Where is the code for it?
Couldnt find the code or step by step tutorials?

8

MS Ajax should basically just be drag and drop. Just make sure you have the AjaxControlToolkit installed

9

I found one that works ok. it uses a js file as attached.

The only things that i need to adjust are:

  1. The position of display. At the moment it is displayed on the top left. which parameter in the script controls the display of the claender? i need it to pop up under or just next to the input field.

  2. The previous dates are not relevant to me so we dont need people to look at them. how do we disable previous dates?

  3. The second calendar date should be greater than the first calendar . for instance people booking a room or so can check availability from date 1 to date 2, and should not be able to input a date older than the current selected date in the calendar?

Any ideas how or which parameters in the scripts needs adjusting or adding?

I have attached the js script for your information. everything works apart from the 3 points mentioned above.

The form fields for the calendars that works with it is shown below:

<td>Leaving:<input type=“text” name = “date1” autocomplete=“on” value=“dd/mm/yyyy” size=“15”> <A HREF=“#”
onClick=“cal.select(document.forms[‘example’].date1,‘anchor1’,‘dd/MM/yyyy’); return false;”
NAME=“anchor1” ID=“anchor1”><img src=“images/calendar.gif”></A>
</td>

<td>Returning:<input type=“text” name = “date2” autocomplete=“on” value=“dd/mm/yyyy” size=“15”><A HREF=“#”
onClick=“cal.select(document.forms[‘example’].date2,‘anchor1’,‘dd/MM/yyyy’); return false;”
NAME=“anchor1” ID=“anchor1”><img src=“images/calendar.gif”></A>

Thanks again