Forums : Xul, Xbl, JS...

dans le .xul, ajouter :

<?xul-overlay href="http://monsite.toto.fr/datepicker/datePicker.xul"?> (là, il faut remplacer 'http://monsite.toto.fr' ....)

dans le tag <windows/> :

<popupset>
 <popup id="calendar"/>
</popupset>

<label class="inputlabel" value="date signature:" />
<textbox readonly='true' id="dateSignature"/>
<button  label="..." popup='calendar' onmouseover="setDateCtl('dateSignature');" />

sur un sous-repertoire datepicker, creer un fichier datepicker.js :

// Inspired by the work of Tan Ling Wee on 2 Dec 2001
// email : fuushikaden@yahoo.com
// Written by Pascal Courtonne on Nov 2004
// email : pascal@sedir.fr
var fixedX = -1			// x position (-1 if to appear below control)
var fixedY = -1			// y position (-1 if to appear below control)
var startAt = 1			// 0 - sunday ; 1 - monday
var showWeekNumber = 1		// 0 - don't show; 1 - show
var showToday = 0		// 0 - don't show; 1 - show
var imgDir = "datepicker/"	// directory for images ... e.g. var imgDir="/img/"
var todayString = "Aujourd'hui : "
 var crossobj, crossMonthObj, crossYearObj, monthSelected, yearSelected, dateSelected, omonthSelected,    oyearSelected, odateSelected, monthConstructed, yearConstructed, intervalID1,  intervalID2,timeoutID1,timeoutID2, ctlToPlaceValue, ctlNow, dateFormat, nStartingYear
ctlToPlaceValue="";
var	bPageLoaded=false
var	ie=document.all
var	today =	new	Date()
var	dateNow	 = today.getDate()
var	monthNow = today.getMonth()
var	yearNow	 = today.getYear()
var	imgsrc = new Array("drop1.gif","drop2.gif","left1.gif","left2.gif","right1.gif","right2.gif")
var	img	= new Array()
var monthName  = new   Array("Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet",
"Aout","Septembre","Octobre","Novembre","Decembre")
if (startAt==0)
	{
	dayName = new Array	("Dim","Lun","Mar","Mer","Jeu","Ven","Sam")
	}
else
	{
	dayName = new Array	("Lun","Mar","Mer","Jeu","Ven","Sam","Dim")
	}
var styleAnchor="text-decoration:none;color:black;"
var styleLightBorder="border-style:solid;border-width:1px;border-color:#a0a0a0;"
function swapImage(srcImg, destImg)
{
   document.getElementById(srcImg).setAttribute("src",imgDir + destImg) 
}
function setDateCtl(ctl2)
{
ctlToPlaceValue=ctl2;
}
function recordValue(sdate)
{
  document.getElementById(ctlToPlaceValue).value = sdate;
}
function initFormat()
{
  format="dd/mm/yyyy";
  dateFormat=format;
  formatChar = " "
  aFormat = dateFormat.split(formatChar)
 if(aFormat.length < 3 )
   {
   formatChar = "/"
   aFormat = dateFormat.split(formatChar)
   if(aFormat.length<3)
     {
     formatChar = "."
     aFormat = dateFormat.split(formatChar)
     if(aFormat.length<3)
       {
       formatChar = "-"
       aFormat = dateFormat.split(formatChar)
       if(aFormat.length<3)
         {
         // invalid date format
         formatChar=""
         }
       }
     }
   }
 tokensChanged = 0
 if(formatChar == "")
   {
   // use users date
   aData =	ctl2.value.split(formatChar)
   for(i=0;i<3;i++)
     {
     if((aFormat[i]=="d") || (aFormat[i]=="dd"))
       {
       dateSelected = parseInt(aData[i], 10)
       tokensChanged ++
       }
     else if((aFormat[i]=="m") || (aFormat[i]=="mm"))
       {
       monthSelected = parseInt(aData[i], 10) - 1
       tokensChanged ++
       }
     else if(aFormat[i]=="yyyy")
       {
       yearSelected = parseInt(aData[i], 10)
       tokensChanged ++
       }
     else if(aFormat[i]=="mmm")
       {
       for(j=0; j<12;	j++)
         {
         if(aData[i]==monthName[j])
           {
           monthSelected=j
           tokensChanged ++
           }
         }
}
     }
   }
 if ((tokensChanged!=3)||isNaN(dateSelected)||isNaN(monthSelected)||isNaN(yearSelected))
   {
   dateSelected = dateNow
   monthSelected = monthNow
   yearSelected = yearNow
   }
 odateSelected=dateSelected
 omonthSelected=monthSelected
 oyearSelected=yearSelected
}
function initCalendar()
{
 if(ctlToPlaceValue=="")
   {
   alert("Erreur : controle date non defini");
   }
 if(bPageLoaded != true)
   {
   yearNow += 1900;
   lbl_today = document.getElementById('lblToday');
   lbl_today.setAttribute("value",
                          todayString + dayName[(today.getDay()-startAt==-1)?6:(today.getDay()-startAt)]+", "  + dateNow + " " + monthName[monthNow].substring(0,3) + " " + yearNow);
   initFormat();
   }
   title_img1 = document.getElementById('changeMonthLeft');
   title_img1.setAttribute("src",imgDir+"left1.gif");
   title_img1.setAttribute("border","1");
   title_img1.setAttribute("onmouseover","swapImage(\"changeMonthLeft\",\"left2.gif\");");
   title_img1.setAttribute("onmouseout","swapImage(\"changeMonthLeft\",\"left1.gif\");");
   title_img1.setAttribute("onmousedown","decMonth()");
   title_img2 = document.getElementById('changeMonthRight');
   title_img2.setAttribute("src",imgDir+"right1.gif");
   title_img2.setAttribute("border","1");
   title_img2.setAttribute("onmouseover","swapImage(\"changeMonthRight\",\"right2.gif\");");
   title_img2.setAttribute("onmouseout","swapImage(\"changeMonthRight\",\"right1.gif\");");
   title_img2.setAttribute("onmousedown","incMonth()");
   title_box3 = document.getElementById('changeMonthBox');
  title_box3.setAttribute("style","border-style:solid;border-width:1px;border-color:#3366FF;cursor:pointer");
 title_box3.setAttribute("onmouseover",
document.getElementById('changeMonthBox').setAttribute(\"style\",\"border-style:solid;border-width:1px;border-color:#88AAFF;cursor:pointer\")");
 title_box3.setAttribute("onmouseout",
"document.getElementById('changeMonthBox').setAttribute(\"style\",\"border-style:solid;border-width:1px;border-color:#3366FF;cursor:pointer\")");
   title_label1 = document.getElementById('spanMonth');
   title_label1.setAttribute("value","mois");
   title_img3 = document.getElementById('changeYearLeft');
   title_img3.setAttribute("src",imgDir+"left1.gif");
   title_img3.setAttribute("border","1");
   title_img3.setAttribute("onmouseover","swapImage(\"changeYearLeft\",\"left2.gif\");");
   title_img3.setAttribute("onmouseout","swapImage(\"changeYearLeft\",\"left1.gif\");");
   title_img3.setAttribute("onmousedown","decYear()");
   title_img4 = document.getElementById('changeYearRight');
   title_img4.setAttribute("src",imgDir+"right1.gif");
   title_img4.setAttribute("border","1");
   title_img4.setAttribute("onmouseover","swapImage(\"changeYearRight\",\"right2.gif\");");
   title_img4.setAttribute("onmouseout","swapImage(\"changeYearRight\",\"right1.gif\");");
   title_img4.setAttribute("onmousedown","incYear()");
   title_box4 = document.getElementById('changeYearBox');
title_box4.setAttribute("style","border-style:solid;border-width:1px;border-color:#3366FF;cursor:pointer");
title_box4.setAttribute("onmouseover","document.getElementById('changeYearBox').setAttribute(\"style\",\"border-style:solid;border-width:1px;border-color:#88AAFF;cursor:pointer\")");
title_box4.setAttribute("onmouseout","document.getElementById('changeYearBox').setAttribute(\"style\",\"border-style:solid;border-width:1px;border-color:#3366FF;cursor:pointer\")");
   title_label2 = document.getElementById('spanYear');
   title_label2.setAttribute("value","annee");
   bPageLoaded=true
   monthSelected=monthNow;
   yearSelected=yearNow;
   constructCalendar();
}
function padZero(num)
{
	return (num < 10) ? '0' + num : num ;
}
function constructDate(d,m,y)
{
	sTmp = dateFormat 
	sTmp = sTmp.replace ("dd","<e>")
	sTmp = sTmp.replace ("d","<d>")
	sTmp = sTmp.replace ("<e>",padZero(d))
	sTmp = sTmp.replace ("<d>",d)
	sTmp = sTmp.replace ("mmm","<o>")
	sTmp = sTmp.replace ("mm","<n>")
	sTmp = sTmp.replace ("m","<m>")
	sTmp = sTmp.replace ("<m>",m+1)
	sTmp = sTmp.replace ("<n>",padZero(m+1))
	sTmp = sTmp.replace ("<o>",monthName[m])
	return sTmp.replace ("yyyy",y)
}
function StartDecMonth()
{
	intervalID1=setInterval("decMonth()",80)
}
function StartIncMonth()
{
	intervalID1=setInterval("incMonth()",80)
}
function incMonth ()
{
	monthSelected++
	if (monthSelected>11)
		{
		monthSelected=0
		yearSelected++
		}
	constructCalendar()
}
function decMonth ()
{
monthSelected--
if (monthSelected<0)
	{
	monthSelected=11
	yearSelected--
	}
constructCalendar()
}
function incYear()
{
 title_label2 = document.getElementById('spanYear');
 yearSelected++
 title_label2.setAttribute("value",yearSelected);
 constructCalendar();
}
function decYear()
{
 title_label2 = document.getElementById('spanYear');
 yearSelected--;
 title_label2.setAttribute("value",yearSelected);
 constructCalendar();
}
function WeekNbr(today)
{
Year = takeYear(today);
Month = today.getMonth();
Day = today.getDate();
now = Date.UTC(Year,Month,Day+1,0,0,0);
var Firstday = new Date();
Firstday.setYear(Year);
Firstday.setMonth(0);
Firstday.setDate(1);
then = Date.UTC(Year,0,1,0,0,0);
var Compensation = Firstday.getDay();
if (Compensation > 3)
	Compensation -= 4;
else
	Compensation += 3;
NumberOfWeek =  Math.round((((now-then)/86400000)+Compensation)/7);
return NumberOfWeek;
}
function takeYear(theDate)
{
x = theDate.getYear();
var y = x % 100;
y += (y < 38) ? 2000 : 1900;
return y;
}
function constructCalendar ()
{
var aNumDays = Array (31,0,31,30,31,30,31,31,30,31,30,31)
var dateMessage
var	startDate =	new	Date (yearSelected,monthSelected,1)
var endDate
if (monthSelected==1) // si mois de fevrier --> calcul le nombre de jours
	{
	endDate	= new Date (yearSelected,monthSelected+1,1);
	endDate	= new Date (endDate	- (24*60*60*1000));
	numDaysInMonth = endDate.getDate()
	}
else
	{
	numDaysInMonth = aNumDays[monthSelected];
	}
datePointer	= 0
dayPointer = startDate.getDay()-1; // - startAt
if (dayPointer<0)
	{
	dayPointer = 6
	}
       // construction de la grille des jours du mois en cours
var curColGrid=1;
var curRowGrid=1;
for	( var i=1; i<=dayPointer;i++ )
	{
               var content_rows = document.getElementById("d_l"+curRowGrid+"c"+curColGrid++);
       	content_rows.setAttribute("value"," ");
       	content_rows.setAttribute("style","background-color:#FFFFFF;");
               content_rows.setAttribute("onmouseover","");
               content_rows.setAttribute("onmouseout","");
	}
for	( datePointer=1; datePointer<=numDaysInMonth; datePointer++ )
	{
	dayPointer++;
               var content_rows = document.getElementById("d_l"+curRowGrid+"c"+curColGrid);
       	content_rows.setAttribute("value",datePointer);
               content_rows.setAttribute("onmousedown",
"hidePopup();recordValue(\""+padZero(datePointer)+"/"+padZero(monthSelected+1)+"/"+yearSelected+"\")");
content_rows.setAttribute("onmouseover","document.getElementById(\"d_l"+curRowGrid+"c"+curColGrid+"\").setAttribute(\"style\",\"background-color:#88AAFF;cursor:pointer\")");
               if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow))
       	  dstyle = "color:#ff0000";
	else if	(dayPointer % 7 == 0)
       	  dstyle = "color:#909090";
	else
       	  dstyle = "color:#000000";
       	content_rows.setAttribute("style",dstyle);
content_rows.setAttribute("onmouseout","document.getElementById(\"d_l"+curRowGrid+"c"+curColGrid+"\").setAttribute(\"style\",\""+dstyle+";cursor:pointer\")");
               curColGrid++;
	if(curColGrid > 7)
	  {
	  curColGrid = 1;
	  curRowGrid++;
	  }
	}
do  {
    while(curColGrid < 8)
                     {
                     var content_rows = document.getElementById("d_l"+curRowGrid+"c"+curColGrid++);
       	      content_rows.setAttribute("value"," ");
       	      content_rows.setAttribute("style","background-color:#FFFFFF;");
                     content_rows.setAttribute("onmouseover","");
                     content_rows.setAttribute("onmouseout","");
	      }
	    if(curColGrid > 7)
	      {
	      curColGrid = 1;
	      curRowGrid++;
	      }
    }
while(curRowGrid < 7);
document.getElementById("spanMonth").setAttribute("value", monthName[monthSelected]);
document.getElementById("spanYear").setAttribute("value", yearSelected);
}

sur le meme repertoire, creer un fichier datepicker.xul :

<?xml version="1.0"?>
<!DOCTYPE overlay>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<overlay
  id="calendar"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 
<script type="application/x-javascript" src="datePicker.js"/>
<popup id="calendar" onpopupshown="initCalendar()">
 <window xmlns:html="http://www.w3.org/1999/xhtml"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         style="border: thin solid black;">
    <vbox style='font-family:arial;font-size:11px;border-width:1;border-style:solid;border-color:#a0a0a0;'>
     <hbox style='padding:2px;font-family:arial;font-size:11px;background-color:#0000aa;color:#ffffff'>
       <hbox id='caption'>
  <hbox id="changeMonthBox">
    <image id="changeMonthLeft" />
    <label id="spanMonth" />
    <image id="changeMonthRight" />
  </hbox>
  <hbox id="changeYearBox">
    <image id="changeYearLeft" />
    <label id="spanYear" />
    <image id="changeYearRight" />
  </hbox>
  <hbox/>
         <image src='datepicker/close.gif' style="cursor:pointer" onmousedown='hidePopup()' border='0' /> 
</hbox>
     </hbox>
     <grid style='padding:5px;background-color:#ffffff'>
     <columns>
       <column maxwidth="54"/>
       <column maxwidth="54"/>
       <column maxwidth="54"/>
       <column maxwidth="54"/>
       <column maxwidth="54"/>
       <column maxwidth="54"/>
       <column maxwidth="54"/>
     </columns>
     <rows id='content' style='font-family:arial;font-size:11px;'>
       <row style='background-color:#7070aa;color:#ffffff'>
         <label value="Lun"/>
  <label value="Mar"/>
  <label value="Mer"/>
  <label value="Jeu"/>
  <label value="Ven"/>
  <label value="Sam"/>
  <label value="Dim"/>
</row>
       <row>
         <label value=' ' id='d_l1c1' />
         <label value=' ' id='d_l1c2' />
         <label value=' ' id='d_l1c3' />
         <label value=' ' id='d_l1c4' />
         <label value=' ' id='d_l1c5' />
         <label value=' ' id='d_l1c6' />
         <label value=' ' id='d_l1c7' />
</row>
       <row>
         <label value=' ' id='d_l2c1' />
         <label value=' ' id='d_l2c2' />
         <label value=' ' id='d_l2c3' />
         <label value=' ' id='d_l2c4' />
         <label value=' ' id='d_l2c5' />
         <label value=' ' id='d_l2c6' />
         <label value=' ' id='d_l2c7' />
</row>
       <row>
         <label value=' ' id='d_l3c1' />
         <label value=' ' id='d_l3c2' />
         <label value=' ' id='d_l3c3' />
         <label value=' ' id='d_l3c4' />
         <label value=' ' id='d_l3c5' />
         <label value=' ' id='d_l3c6' />
         <label value=' ' id='d_l3c7' />
</row>
       <row>
         <label value=' ' id='d_l4c1' />
         <label value=' ' id='d_l4c2' />
         <label value=' ' id='d_l4c3' />
         <label value=' ' id='d_l4c4' />
         <label value=' ' id='d_l4c5' />
         <label value=' ' id='d_l4c6' />
         <label value=' ' id='d_l4c7' />
</row>
       <row>
         <label value=' ' id='d_l5c1' />
         <label value=' ' id='d_l5c2' />
         <label value=' ' id='d_l5c3' />
         <label value=' ' id='d_l5c4' />
         <label value=' ' id='d_l5c5' />
         <label value=' ' id='d_l5c6' />
         <label value=' ' id='d_l5c7' />
</row>
       <row>
         <label value=' ' id='d_l6c1' />
         <label value=' ' id='d_l6c2' />
         <label value=' ' id='d_l6c3' />
         <label value=' ' id='d_l6c4' />
         <label value=' ' id='d_l6c5' />
         <label value=' ' id='d_l6c6' />
         <label value=' ' id='d_l6c7' />
</row>
     </rows>
     </grid>
     <hbox style='padding:5px;font-size:11px;background-color:#f0f0f0'>
       <label id='lblToday' value="today"/>
     </hbox>
    </vbox>
 </window>
</popup>
</overlay>

Je vous laisse le soins de créer les .gif necessaires ...

@++