Page 1 of 1

date component

Posted: Wed Jan 09, 2008 4:02 am
by devendra-m
pickle | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I have created a date component and I had implemented it in many places. I will be very glad if it is useful to someone
[syntax="javascript"]
/*******************************************************************
	
		
	NAME : DEVENDRA MAHARJAN 
	EMAIL	: devendram@gmail.com,devendra-m@hotmail.com,devendra@wlinktech.com 
        DEGREE  : B.E. SOFTWARE ENGINEERING  
		
		
	*******************************************************************/

//user variables
var css = 'textbox';
var currentTime = new Date()
var maxYear = currentTime.getFullYear();
var minYear = currentTime.getFullYear() - 100;
var defaultFormat='m-d-y';
var monthDays=new Array('',31,28,31,30,31,30,31,31,30,31,30,31);




function LTrim( value ) {
	
	value+=' ';
	var re = /\s*((\S+\s*)*)/;
	return value.replace(re, "$1");
	
}

// Removes ending whitespaces
function RTrim( value ) {
	
	value+=' ';
	var re = /((\s*\S+)*)\s*/;
	return value.replace(re, "$1");
	
}

// Removes leading and ending whitespaces
function trim( value ) {	
	return LTrim(RTrim(value));
	
}

function dateObject()
{
	//inner variables
	this.dateFormat;
	this.index=new Array();
	this.selectedDMY=new Array();
	this.setval=setValue;
	this.reinst=reinstate;
	this.changeMonthYear=onChangeMonthYear;
}

// name of textbox,format of date(d-m-y),value of date(dd-mm-yy) as specified in format
function dateSet(flName,format,val)
{
	var formatStr='mdy';
	var wrongFormat=false;
	var firstVal=val.split("-");
	var defaultVal=new Array();
	var actualDate=new Array();
	var defaultSelected=new Array();
	var count=0;
	eval('object_'+flName+'=new dateObject()');	
	if(trim(format)!='')
	{
		eval('object_'+flName).dateFormat=format.split("-");		
		for(var i=0;i<eval('object_'+flName).dateFormat.length;i++)
		{
			if(formatStr.indexOf(eval('object_'+flName).dateFormat[i])==-1 || trim(eval('object_'+flName).dateFormat[i])=='')
			{
				wrongFormat=true;
				break;				
			}
		}		
	}
	else 
		eval('object_'+flName).dateFormat=defaultFormat.split("-");
	if(wrongFormat)
		eval('object_'+flName).dateFormat=defaultFormat.split("-");
	
	for(var i=0;i<eval('object_'+flName).dateFormat.length;i++)
	{
		if(typeof(firstVal[i] ) != "undefined" &&  trim(firstVal[i])!='')
			defaultVal[eval('object_'+flName).dateFormat[i]]=Number(firstVal[i]).toString();
		else
			eval('object_'+flName).index[eval('object_'+flName).dateFormat[i]]=0; 
	}	
	if(defaultVal['m']==2 && ((defaultVal['y']%400==0) || (defaultVal['y']%4==0 && defaultVal['y']%100 != 0)))
		monthDays[2]=29;
		
	if(trim(defaultVal['m'])!='' && trim(defaultVal['m'])!='0' )
		var maxDays=monthDays[defaultVal['m']];
	else (typeof(defaultVal['m'])=='undefined' || trim(defaultVal['m'])=='0')
		var maxDays=31;
		
	var dmy=new Array();
	var MonthNames =new Array('','January','February','March','April','May','June','July','August','September','October','November','December');
	dmy['m']=" <select id=\"m_"+flName+"\" class=\""+css+"\" onChange=\"object_"+flName+".changeMonthYear('"+flName+"')\" onFocus=\"object_"+flName+".reinst('"+flName+"');\" onBlur=\"object_"+flName+".setval('"+flName+"');\" >";
	dmy['m']+="<option value=\"\" selected ></option>";
	count=0;
	for(var i=1;i<=MonthNames.length-1;i++)
	{
		count++;
		if(defaultVal['m']==i)
		{
			dmy['m']+="<option value=\""+i+"\" selected>"+MonthNames[i]+"</option>";
			actualDate['m']=i;
			eval('object_'+flName).index['m']=count;
		}
		else
			dmy['m']+="<option value=\""+i+"\">"+MonthNames[i]+"</option>";		
	}
	dmy['m']+="</select>";
	dmy['d']=" <select id=\"d_"+flName+"\" class=\""+css+"\" onFocus=\"object_"+flName+".reinst('"+flName+"');\" onBlur=\"object_"+flName+".setval('"+flName+"');\" >";
	dmy['d']+="<option value=\"\" selected ></option>";
	count=0;
	for(var i=1;i<=maxDays;i++)
	{
		count++;
		if(defaultVal['d']==i)
		{
			dmy['d']+="<option value=\""+i+"\" selected>"+i+"</option>";
			actualDate['d']=i;
			eval('object_'+flName).index['d']=count;
		}
		else
			dmy['d']+="<option value=\""+i+"\">"+i+"</option>";			
		
	}

	dmy['d']+="</select>";
	dmy['y']=" <select id=\"y_"+flName+"\" class=\""+css+"\"  onChange=\"object_"+flName+".changeMonthYear('"+flName+"')\"  onFocus=\"object_"+flName+".reinst('"+flName+"');\" onBlur=\"object_"+flName+".setval('"+flName+"');\" >";
	dmy['y']+="<option value=\"\" selected ></option>";
	count=0;
	for(var i=maxYear;i>=minYear;i--)
	{
		count++;
		if(defaultVal['y']==i)
		{
			dmy['y']+="<option value=\""+i+"\" selected>"+i+"</option>";
			actualDate['y']=i;
			eval('object_'+flName).index['y']=count;			
		}
		else
			dmy['y']+="<option value=\""+i+"\">"+i+"</option>";
		
	}
	dmy['y']+="</select>";	
	count=0;
	var DateSet="<input type=\"hidden\" id=\""+flName+"\" name=\""+flName+"\" value=\"\">";
	for(i=0;i<eval('object_'+flName).dateFormat.length;i++)
		document.write(dmy[eval('object_'+flName).dateFormat[i]]);
	document.write(DateSet);
	var notSelected=false;
	for(var i=0;i<eval('object_'+flName).dateFormat.length;i++)
	{
		if(typeof(actualDate[eval('object_'+flName).dateFormat[i]])!='undefined')
			defaultSelected[count++]=actualDate[eval('object_'+flName).dateFormat[i]];
		else
			notSelected=true;
	}
	if(!notSelected)
		document.getElementById(flName).value=defaultSelected.join("-");
}
function reinstate(flId)
{
	for(var i=0;i<this.dateFormat.length;i++)
	{
		var selBox=document.getElementById(this.dateFormat[i]+"_"+flId);
		selBox.options[this.index[this.dateFormat[i]]].selected=true;		
	} 
}
function setValue(flId)
{
	var dmy=new Array;
	var allSet=false;
	var notSet=true;
	for(var i=0;i<this.dateFormat.length;i++)
	{
		this.index[this.dateFormat[i]]=document.getElementById(this.dateFormat[i]+"_"+flId).selectedIndex;
		if(trim(document.getElementById(this.dateFormat[i]+"_"+flId).options[document.getElementById(this.dateFormat[i]+"_"+flId).selectedIndex].value)!='')
		{
			dmy[i]=document.getElementById(this.dateFormat[i]+"_"+flId).options[document.getElementById(this.dateFormat[i]+"_"+flId).selectedIndex].value;
			allSet=true;
		}
		else
			notSet=false;
	}
	if(allSet && notSet)
		document.getElementById(flId).value=dmy.join("-");
	else
	{
		document.getElementById(flId).value="";
		for(i=0;i<this.dateFormat.length;i++)
			document.getElementById(this.dateFormat[i]+"_"+flId).options[0].selected=true;				
	}
}
function onChangeMonthYear(flName)
{
	var dayId="d_"+flName;
	for(var i=0;i<this.dateFormat.length;i++)
		this.selectedDMY[this.dateFormat[i]]=document.getElementById(this.dateFormat[i]+"_"+flName).options[document.getElementById(this.dateFormat[i]+"_"+flName).selectedIndex].value;
	if( typeof(this.selectedDMY['d'])!='undefined')
	{
		document.getElementById(dayId).options.length=0;
		if((typeof(this.selectedDMY['y'])!='undefined' && trim(this.selectedDMY['y'])!='') && (typeof(this.selectedDMY['m'])!='undefined' && trim(this.selectedDMY['m'])!=''))
		{
			if(this.selectedDMY['m']==2 && ((this.selectedDMY['y']%400==0) || (this.selectedDMY['y']%4 == 0 && this.selectedDMY['y']%100 != 0)))
				monthDays[2]=29;
			else
				monthDays[2]=28;
		}
		if(typeof(this.selectedDMY['m'])!='undefined' && trim(this.selectedDMY['m'])!='')
			var maxDays=monthDays[this.selectedDMY['m']];
		else
			var maxDays=31;
		for(var i=1;i<=maxDays;i++)
		{
			document.getElementById(dayId).options[i] = new Option(i,i);	
			if(trim(this.selectedDMY['d'])==i)
				document.getElementById(dayId).options[i].selected=true;		
		}
	}
}

pickle | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Wed Jan 09, 2008 8:48 am
by staar2
Some kinda example please. I am newb in javascript.

Posted: Wed Jan 09, 2008 10:08 pm
by devendra-m
you can use date component as follows:

Code: Select all

<script>dateSet('DT_OF_BIRTH','d-m-y','<?=$data['DT_OF_BIRTH']?>')</script>
you can even interchange the position of d-m-y like m-d-y or even m-d/d-m/m-y only