Problem with date time picker in javascript

Question

I want to provide user to select date time using some control. For that I tried using Javascript datetime picker which I directly copy and past from the internet but its not working. I got it from here .

Please help me in solving this problem. Is there any other way to provide user with this facility? I am using ASP.NET C#. I am completely new in javascript as well as Jquery.

//Here is the code for java script. //Javascript name: My Date Time Picker //Date created: 16-Nov-2003 23:19 //Scripter: TengYong Ng //Website: http://www.rainforestnet.com //Copyright (c) 2003 TengYong Ng //FileName: DateTimePicker.js //Version: 0.8 //Contact: contact@rainforestnet.com // Note: Permission given to use this script in ANY kind of applications if // header lines are left unchanged.

//Global variables 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 NewCal(pCtrl,pFormat,pShowTime,pTimeMode)
{

    alert('Hi Calender');
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,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\">\n";
//Month Selector
vCalHeader+="<tr>\n<td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'>\n";
vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\">\n";
for (i=0;i<12;i++)
{
    if (i==Cal.Month)
        SelectStr="Selected";
    else
        SelectStr="";   
    vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n";
}
vCalHeader+="</select></td>";
//Year selector
vCalHeader+="\n<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>\n";   
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>\n";
//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="<tr>";
for (i=0;i<vFirstDay;i++)
{
    vCalData=vCalData+GenCell();
    vDayCount=vDayCount+1;
}
for (j=1;j<=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<Cal.GetMonDays()))
    {
        vCalData=vCalData+"</tr>\n<tr>";
    }
}
docCal.writeln(vCalData);   
//Time picker
if (Cal.ShowTime)
{
    var showHour;
    showHour=Cal.getShowHour();     
    vCalTime="<tr>\n<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+="<select name=\"ampm\" onchange=\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\">";
        vCalTime+="<option "+SelectAm+" value=\"AM\">AM</option>";
        vCalTime+="<option "+SelectPm+" value=\"PM\">PM<option>";
        vCalTime+="</select>";
    }   
    vCalTime+="\n</td>\n</tr>";
    docCal.write(vCalTime);
}   
//end time picker
docCal.writeln("\n</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'><b>";vHLstr2="</b>";}
else
    {vHLstr1=">";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="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href=\"javascript:winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\">"+PValue+"</a>"+vHLstr2+"</font></td>";
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()<10)
    this.Minutes="0"+pDate.getMinutes();
else
    this.Minutes=pDate.getMinutes();

if (pDate.getSeconds()<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()<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;   

Below is the call for javascript function Here the function NewCal() is being called which I checked by keeping alert message in that function as shown in above code but further script is not executed.

Answer 1

which I directly copy and past from the internet [sic]

While I have nothing against the legitimacy of the source that you picked, you should always bear in mind that the Internet is choke full of dubious resources. You should gravitate towards well-established, well-documented, stable libraries.

If you have that option, I would recommend using jQuery UI:

http://jqueryui.com/demos/datepicker/

Edit:

A bare-minimum example just to get you started:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script>
    $(function () {
        $("#date").datepicker();
    });
</script>
<input id="date" />

Just copy-paste this into a .html file and open up in your browser. Note that the markup is not complete (but it will still work).

Answer 2

Quite easy is this. First download JQuery UI from here and include into your page. Then use the following method

<scritp type="text/javascript">
(function($){
    $("#datepicker").datepicker({
    showOn: "button",
    buttonImage: "/images/calendar.gif",
    buttonImageOnly: true
    });
})(jQuery);

Make a textbox with the id datapicker like this

<input type="text" id="datepicker">