Choix de dates et de periode
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
- Choix de dates et de periode
- Roue choix aléatoire - Forum VB.NET
- Checkbox html choix unique ✓ - Forum Javascript / DHTML
- Checkbox choix limité ✓ - Forum Javascript / DHTML
- Roulette choix en ligne - Forum Visual Basic 6
- Gestion de dates - Forum VB.NET
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.