Choix de dates et de periode

Commenter

Contenu du snippet

Ce code vous permet d'envoyer par formulaire une periode avec ses dates limites, tres utile pour des pages de stats.
Au format YYYYMMJJ, mais tres facilement modifiable.

Source / Exemple : 


<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT>
var Today = new Date()
var Days = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi")
var Months = new Array("Janvier","FšŠvrier","Mars","avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre")
var msc_day = 1000*60*60*24
//	retourne la date au format "JJ/MM/AAAA"
function DateFormat_French(JscDate){
	var sDay = JscDate.getDate() < 10 ? "0" + JscDate.getDate() : JscDate.getDate()
	var sMonth = JscDate.getMonth()+1 < 10 ?  "0" + (JscDate.getMonth()+1) : JscDate.getMonth()+1
	return(sDay  + "/" + sMonth + "/" + JscDate.getFullYear())
}
//	retourne la date au format "AAAAMMJJ"
function DateFormat_Serial(JscDate){
	var sDay = JscDate.getDate() < 10 ? "0" + JscDate.getDate() : JscDate.getDate()
	var sMonth = JscDate.getMonth()+1 < 10 ?  "0" + (JscDate.getMonth()+1) : JscDate.getMonth()+1
	return(""+JscDate.getFullYear() + sMonth + sDay)
}
//	retourne la date du premier jour de la semaine (1 = lundi)
function Week_FirstDay(FromDate){
	var TestDate = new Date()
	for (j=0; j<=7; j++){
		TestDate.setTime(FromDate.getTime()-(msc_day*j))
		if(TestDate.getDay() ==  1){return(TestDate)}
	}
}
//	retourne le numšŠro de la semaine
function GetWeekNumber(FromDate){
	var tDate = new Date()
	tDate.setTime(FromDate.getTime())
	tDate = Week_FirstDay(tDate)
	for (w=0; w<53; w++){
		if (tDate.getFullYear() != FromDate.getFullYear()){return(w)}
		tDate.setTime(tDate.getTime()-(msc_day*7))
	}
}
function ShowDates(Type, iFromNow){
	var DateStart = new Date()
	var DateEnd = new Date()
	var iIndex = 0
	var sTitle = ""
	
	if (Type == "day"){	//	type jour donc : dšŠbut de la semaine
		DateStart = Week_FirstDay(DateStart)
		DateStart.setTime(DateStart.getTime()-(msc_day*7*iFromNow))
		DateEnd.setTime(DateStart.getTime()+(msc_day*6))
		sTitle = "Semaine n¡ã " + GetWeekNumber(DateStart)
	}
	else if (Type == "week"){//	type semaine donc : dšŠbut et fin de mois
		DateStart.setDate(1)
		for (i=0;i<iFromNow;i++){
			DateStart.setDate(-1)
			DateStart.setDate(1)
		}
		sTitle = Months[DateStart.getMonth()]
		DateEnd.setTime(DateStart.getTime())
		DateEnd.setDate(33)
		DateEnd.setDate(0)	
		DateStart = Week_FirstDay(DateStart)
		iIndex = GetWeekNumber(DateStart)
	}
	else if (Type == "month"){//	type mois donc : dšŠbut et fin d'annšŠe
		var DateStart = new Date()
		DateStart.setDate(1)
		for (i=0;i<iFromNow;i++){
			DateStart.setYear(DateStart.getYear()-1)
		}
		DateStart.setDate(1)
		DateStart.setMonth(0)
		DateEnd.setTime(DateStart.getTime())
		DateEnd.setMonth(11)
		DateEnd.setDate(31)
		iIndex = 1
		sTitle = "AnnšŠe  " + DateStart.getFullYear()
	}

	var shtml = "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0  WIDTH='100%'>"
		+ "<TR><TD COLSPAN=2 ALIGN='center'>"
		+ "<A CLASS='ch_PeriodCursor' HREF=\"javascript: ShowDates('"+Type+"', "+(iFromNow+1)+")\">¡û</A> "
		if (iFromNow > 0)
			{shtml += "<A CLASS='ch_PeriodCursor' HREF=\"javascript: ShowDates('"+Type+"', "+(iFromNow-1)+")\">¡ú</A>"}
			else
			{shtml += "<SPAN CLASS='ch_PeriodCursor Disable'>¡ú</SPAN>"}
		shtml += "</TD></TR>"
		shtml += "<TR><TD COLSPAN=2 CLASS='ch_IntervalTitle'>" + sTitle + "</TD></TR>"
	
	var cDate = new Date()
	var DateEndPeriod = new Date()	//	fin de la pšŠriode
	var TodaySerial = DateFormat_Serial(Today)	//	date d'aujourd'hui au format AAAAMMJJ
	cDate.setTime(DateStart.getTime())
	while (DateFormat_Serial(cDate) <= DateFormat_Serial(DateEnd)){
		var cDateSerial = DateFormat_Serial(cDate)	//	date courante au format AAAAMMJJ
		if (Type == "day"){
			DateEndPeriod.setTime(cDate.getTime())
			iIndex = cDate.getDate()
			sName = Days[cDate.getDay()]
		}
		else if(Type == "week"){
			DateEndPeriod.setTime(cDate.getTime()+(msc_day*6))
			sName = DateFormat_French(cDate)
			iIndex = GetWeekNumber(cDate)
		}
		else if(Type == "month"){
			DateEndPeriod.setTime(cDate.getTime())
			DateEndPeriod.setDate(33)
			DateEndPeriod.setDate(0)	
			sName = Months[cDate.getMonth()]
		}
		if (iIndex < 10){iIndex = "0" + iIndex}
		
		if (DateFormat_Serial(cDate) <= TodaySerial){
			js = "SelectDate("+DateFormat_Serial(cDate)+","+DateFormat_Serial(DateEndPeriod)+",'"+Type+"');"
			sName = "<SPAN CLASS='ch_Index'>" + iIndex + " </SPAN><A ID=\"DateSel\" NAME=\"DateSel\" onclick=\"SelectLink()\" CLASS='ch_Link' STYLE=\"width: 70px\" HREF=\"javascript: "+js+"\">" + sName + "</A>"
		}
		else
		{
			sName = "<SPAN CLASS='ch_Index Disable'>" + iIndex + " </SPAN><SPAN CLASS='ch_Link Disable' STYLE=\"width: 70px\">" + sName + "</SPAN>"
		}
		
		shtml += "<TR><TD>" + sName + "</TD></TR>"
		
		if (Type == "day"){
			cDate.setTime(cDate.getTime()+(msc_day*1))
		}
		else if(Type == "week"){
			cDate.setTime(cDate.getTime()+(msc_day*7))
		}
		else if(Type == "month"){
			cDate.setDate(33)
			cDate.setDate(1)
			iIndex++
		}
	}
	Dates.innerHTML = shtml
}

function SelectDate(Start, End, sType){
	DateStart.value = Start
	DateFinish.value = End
	Type.value = sType
}

function SelectLink(){
	oCol = document.getElementsByName(window.event.srcElement.id)
	sClass = "ch_Link"
	for (i=0; i<oCol.length; i++){oCol[i].className = "ch_Link"}
	window.event.srcElement.className = "ch_Link Selected"
}	
</SCRIPT>
<STYLE>
.ch_Title{font: 12 Arial; text-align: center; font-weight: bold; background-color: #DDDDDD}
.ch_Content{background-color: #F5F5F5; vertical-align: top;}
.ch_Link{padding-left: 5; padding-right: 5; font: 12 Arial; width: 100%; text-decoration: none;}
.ch_Link:hover{background-color: #FFFFCC; color: #0000AA;}
.ch_Index{font: 10 Arial; color: #000000}
.ch_PeriodCursor{font: 16 Arial; width: 30; font-weight: bold;; text-decoration: none;}
.ch_IntervalTitle{font: 12 Arial; text-align: center; font-weight: normal;}
.Selected{background-color: #6699CC; color: #FFFFFF}
.Disable{cursor: default; color: #AAAAAA;}
</STYLE>
</HEAD>
<BODY>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1 STYLE="table-layout: fixed">
	<COL WIDTH=70><COL WIDTH=85>
	<TR CLASS="ch_Title"><TD>PšŠriode</TD><TD>Interval</TD></TR>
	<TR>
		<TD CLASS="ch_Content">
	
		<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH="100%">
			<TR><TD><A ID="Period" NAME="Period" onclick="SelectLink()" CLASS="ch_Link" HREF="javascript: ShowDates('day', 0)">Jours</A></TD></TR>
			<TR><TD><A ID="Period" NAME="Period" onclick="SelectLink()" CLASS="ch_Link" HREF="javascript: ShowDates('week', 0)">Semaines</A></TD></TR>
			<TR><TD><A ID="Period" NAME="Period" onclick="SelectLink()" CLASS="ch_Link" HREF="javascript: ShowDates('month', 0)">Mois</A></TD></TR>
		</TABLE>
	
		</TD>
    	<TD ID="Dates" CLASS="ch_Content"> </TD>
	</TR>
</TABLE>

RšŠsultat :<BR>
Date dšŠbut : <INPUT TYPE="text" ID="DateStart" NAME="DateStart"><BR>
Date Fin : <INPUT TYPE="text" ID="DateFinish" NAME="DateFinish"><BR>
Type : <INPUT TYPE="text" ID="Type" NAME="Type"><BR>
</BODY>
</HTML>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (francktfr)