Jojoxx.net

 

 

AnvändareAnvändare
Besökare just nu: 69
SnabblänkarSnabblänkar
JavaScript-arkivet
Perl
FAQ
Sök på Jojoxx.netSök på Jojoxx.net



Datepicker

Exempel

Datum (klicka i fältet för att välja datum)

Kod


<form name="myform">
Datum <input type="text" name="date" size="8" onclick="dp.show();"> (klicka i fältet för att välja datum)<br>
<script>
dp=new datePicker("dp");
var f=document.forms['myform'];
dp.map={ date:f.date }

/* Detta script finns att hämta på http://www.jojoxx.net och 
   får användas fritt så länge som dessa rader står kvar. */ 

function datePicker(id){
	this.daynames=Array("Mån","Tis","Ons","Tor","Fre","Lör","Sön");
	this.monthnames=Array("Jan","Feb","Mar","Apr","Maj","Jun","Jul","Aug","Sep","Okt","Nov","Dec");
	this.styleHeading='font-size:12px;font-family:Verdana;width:24px;';
	this.styleCells='font-size:12px;font-family:Verdana;cursor:pointer;padding:1px;';
	this.styleBox='text-align:right;font-size:12px;font-family:Verdana;border:solid rgb(250,250,250) 1px;border-left:solid rgb(220,220,220) 1px;border-top:solid rgb(220,220,220) 1px;';
	this.styleBackgroundColor='rgb(240,240,240);';
	this.id=id; this.onSelect=false; this.map={};
	this.date=new Date();
	this.ddigit=function(n){ return(n<10)?"0"+n:n; }
	this.select=function(){
		if(this.map.year){ this.map.year.value=this.date.getFullYear(); } if(this.map.month){ this.map.month.value=this.ddigit(this.date.getMonth()+1); } if(this.map.day){ this.map.day.value=this.ddigit(this.date.getDate()); }
		if(this.map.date){ this.map.date.value=this.date.getFullYear()+"-"+this.ddigit(this.date.getMonth()+1)+"-"+this.ddigit(this.date.getDate()); }
		if(this.onSelect){ eval(this.onSelect); }
		this.hide();		
	}
	this.show=function(){ document.getElementById("datePicker-"+this.id).style.visibility="visible"; this.reWrite(); }
	this.hide=function(){ document.getElementById("datePicker-"+this.id).style.visibility="hidden"; }
	this.setTS=function(ts){
		var d=new Date(0);
		var p=(p)?p:ts.match(/(\w+)\-(\w+)\-(\w+)\s(\w+)\:(\w+)\:(\w+)/); p=(p)?p.concat(0):p;  // 2000-01-01 12:00:00
		if(p[1]!="x"){ this.date.setFullYear(p[1]); } if(p[2]!="x"){ this.date.setMonth(p[2]-1); } if(p[3]!="x"){ this.date.setDate(p[3]); } if(p[4]!="x"){ this.date.setHours(p[4]); } if(p[5]!="x"){ this.date.setMinutes(p[5]); } if(p[6]!="x"){ this.date.setSeconds(p[6]); }
		this.reWrite();
	}
	this.wd=function(i){ return((i==0)?7:i); }
	this.makeHtml=function(){
		var currentYear=this.date.getFullYear(); var currentMonth=this.date.getMonth()+1;
		var prevMonthYear=(currentMonth==1)?currentYear-1:currentYear; var prevMonthMonth=(currentMonth==1)?12:currentMonth-1; var nextMonthYear=(currentMonth==12)?currentYear+1:currentYear; var nextMonthMonth=(currentMonth==12)?1:currentMonth+1;
		this.html='<div style="background-color:'+this.styleBackgroundColor+this.styleBox+'">';
		this.html+='<span onclick="'+this.id+'.setTS(\''+prevMonthYear+'-'+prevMonthMonth+'-x x:x:x\')" style="'+this.styleCells+'"><<</span> ';
		this.html+=this.monthnames[this.date.getMonth()]+" "+this.date.getFullYear();
		this.html+=' <span onclick="'+this.id+'.setTS(\''+nextMonthYear+'-'+nextMonthMonth+'-x x:x:x\')" style="'+this.styleCells+'">>></span>';
		this.html+=' <span onclick="'+this.id+'.hide()" style="'+this.styleCells+'font-family:Wingdings;color:gray;">x</span>';
		this.html+='<table><tr><td style="'+this.styleHeading+'">'+this.daynames.join('</td><td style="'+this.styleHeading+'">')+'</td></tr>';
		var i=new Date(this.date.getFullYear(),this.date.getMonth(),1);
		if(i.getDay()!=1){ this.html+='<tr><td colspan="'+(this.wd(i.getDay())-1)+'"></td>'; }
		for(i=i;i.getMonth()==this.date.getMonth();i.setDate(i.getDate()+1)){
			var datestr=i.getDate()+"/"+(i.getMonth()+1);
			if(i.getDay()==1){ this.html+='<tr>'; }	
			var cellClass="datePickerCell"; var cellStyle=this.styleCells;
			if(i.getDay()==0){ cellClass+=" datePickerCellSunday"; }
			if(i.getDate()==this.date.getDate()){ cellStyle+="background-color:rgb(255,220,220);"; }
			this.html+='<td class="'+cellClass+'" style="'+cellStyle+'" onmouseover="this.style.border=\'solid red 1px\';this.style.padding=\'0px\';" onmouseout="this.style.border=\'\';this.style.padding=\'1px\';"" onclick="'+this.id+'.setTS(\'x-x-'+this.wd(i.getDate())+' x:x:x\'); '+this.id+'.select();">'+this.wd(i.getDate())+'</td>'
			if(i.getDay()==0){ this.html+='</tr>'; }
		}
		this.html+='</tr></table></div>';
	}
	this.reWrite=function(){
		this.makeHtml();
		document.getElementById("datePicker-"+this.id).innerHTML=this.html;
	}
	document.write('<style type="text/css">.datePickerCell { } .datePickerCellSunday { color:red; }</style><div id="datePicker-'+this.id+'" style="position:absolute;z-index:100;width:200px;visibility:hidden;"></div>');
	this.reWrite();
}
</script>
</form>


,