Choix de dates et de periode

Soyez le premier à donner votre avis sur cette source.

Snippet vu 13 013 fois - Téléchargée 28 fois

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

Ajouter un commentaire

Commentaires

Messages postés
16
Date d'inscription
mercredi 8 octobre 2008
Statut
Membre
Dernière intervention
26 septembre 2014

merci
Messages postés
127
Date d'inscription
lundi 7 avril 2003
Statut
Membre
Dernière intervention
6 mars 2009

peut êtrre intéressant, mais bizarrement francisé ?
à mon avis une relecture de ta source et une explication sur les différents champs seraient les bienvenus.
kenavo

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.