DateTimePicker Problem !

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • jessy
    New Member
    • Oct 2006
    • 106

    DateTimePicker Problem !

    Hi,
    I have a problem with my DateTimePicker javascript code which i downloaded , the problem is when i pick the date and the date appears in my Text Field and i click Submit the date which i picked is not sent to the DB and instead the default value of the text field which is 00-00-0000 is Sent

    so what i need is to make the value i picked replace the value of the Text Field
    and i cant seem to get the Js code which i downloaded . i'm new to Javascript

    Code:
    //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)
    {
    	if (document.getElementById(pCtrl).disabled) return;
    	
    	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=250,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>";
    	var myDate=Cal.FormatDate(PValue);
    	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=For
    matDate;
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Can you show the code of the text field in question.

    Comment

    • clain
      New Member
      • Feb 2007
      • 79

      #3
      i think there is multiple posting .... or there should be some function or event that triggers before actual posting is done..... which changes the text value

      Comment

      • jessy
        New Member
        • Oct 2006
        • 106

        #4
        Code:
        while($row=mysql_fetch_array($query))
                           {     $shipping_date=$row[shipping_date];
                            
        <td><input type="text" id="demo<?echo$count?>" name="date[]" value="<?=$shipping_date?>" disabled="disabled"><a href="javascript:NewCal('demo<?echo$count?>','ddmmyyyy')"><img src="/images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a></td>
        
                      }
        the text field is first shown as disabled with the shipping date 00-00-0000 then upon making a select it chages into enabled through Js.
        anyway, thats not the problem ...the problem is when its enabled and i click on the calendar icon and opens a popup i choose the date and it's successfully added to the Enabled text field But seems its not actually added !!

        Comment

        • jessy
          New Member
          • Oct 2006
          • 106

          #5
          Originally posted by clain
          i think there is multiple posting .... or there should be some function or event that triggers before actual posting is done..... which changes the text value

          Yes, Can u plz show me an example of how to do That ?!

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            When the text box is enabled and the value is set, check the value in the DOM in your debugger, e.g. Firebug.

            Comment

            • hsriat
              Recognized Expert Top Contributor
              • Jan 2008
              • 1653

              #7
              If you can see the value of new date before you click submit, then I think, may be you are doing some validation onclick of the submit button which is messing up the values in the input.

              Or just check on the PHP end what is being posted by the form.
              Add <?php print_r($_POST) ?> in the beginning of your php of the target page.

              Comment

              • jessy
                New Member
                • Oct 2006
                • 106

                #8
                Yes, I can see the Value of the new Date before i click Submit ... but only i can see it in the text field ...but when i click ViewSource to check if the date was in the text field value But it's not !!
                Code:
                value=""
                im not doing anything on the Submit and not using onclick !!
                i tried to contact the author but seems he is no longer in the field of programming :D
                how lucky i am

                Comment

                • jessy
                  New Member
                  • Oct 2006
                  • 106

                  #9
                  Thanks People for your Help
                  seems the problem was in the DB field !!
                  it was set to DATE and the sql date format yyyy-mm-dd while the date fetched from the calendar was dd-mm-yyyy so i changed it to VARCHAR and the problem was solved But after i Lost some of my Hair

                  Comment

                  • acoder
                    Recognized Expert MVP
                    • Nov 2006
                    • 16032

                    #10
                    Glad you solved your problem and thanks for posting the solution. It may have been a good idea to keep the date type and changed the input to match the type because DATE is a lot more useful than VARCHAR.

                    Comment

                    • hsriat
                      Recognized Expert Top Contributor
                      • Jan 2008
                      • 1653

                      #11
                      Originally posted by jessy
                      Thanks People for your Help
                      seems the problem was in the DB field !!
                      it was set to DATE and the sql date format yyyy-mm-dd while the date fetched from the calendar was dd-mm-yyyy so i changed it to VARCHAR and the problem was solved But after i Lost some of my Hair
                      :D
                      get some minoxidil..
                      Anyhow, glad to know you solved it, and I think you need to install some debuggers like firebug or web development toolbar for Firefox. They may help you to reach the solution easily.

                      Comment

                      • Valeriy
                        New Member
                        • Nov 2013
                        • 1

                        #12
                        Use another plugin datetimepicker

                        Comment

                        Working...