Choix de dates et de periode
Soyez le premier à donner votre avis sur cette source.
Snippet vu 13 693 fois - Téléchargée 30 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.
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","Fvrier","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 numro 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 : dbut 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 : dbut 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 : dbut et fin d'anne
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 = "Anne " + 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 priode
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>Priode</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>
Rsultat :<BR>
Date dbut : <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
- Javascript date
- Date javascript - Meilleures réponses
- Format javascript date - Meilleures réponses
- Javascript : Date heure utc - CodeS SourceS - Guide
- Javascript : Date en arabe - CodeS SourceS - Guide
- Javascript : Date-heure actualisée, tout simple (mais en breton) pour les amateurs... - CodeS - Guide
- Javascript : Date, heure avec actualisation - CodeS SourceS - Guide
- Javascript : Date affichée en arabe - CodeS SourceS - Guide
21 sept. 2010 à 17:29
20 juil. 2004 à 11:26
à 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.