Calendrier : Toujours visible sur la page [Résolu]

EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 31 mars 2014 à 15:21 - Dernière réponse : EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention
- 1 avril 2014 à 11:20
Bonjour,
Je voudrait savoir comment passer d'un calendrier avec un input ou l'on clic dessus pour avoir le calendrier à un calendrier qui est présent de base sur la page sans input (pour l'instant) mais d'où on peut récupérer la date.

voici le code que j'ai trouver pour le calendrier:

<html>
<head>
<title>Démo calendrier v2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 /*###### Bouton gauche des mois ######*/ 
 .MonthLeft{
  width:14px;
  height:50px;
  background:url('images/static.png') -112px -250px;
  position:absolute;
  left:-2px;
  top:0px;
 }
 .MonthLeftOver{
  width:14px;
  height:50px;
  background:url('images/static.png') -126px -250px;
  position:absolute;
  left:-2px;
  top:0px;
 }
 .MonthLeftClick{
  width:14px;
  height:50px;
  background:url('images/static.png') -140px -250px;
  position:absolute;
  left:-2px;
  top:0px;
 }
 /*###### Bouton droit des mois ######*/ 
 .MonthRight{
  width:14px;
  height:50px;
  background:url('images/static.png') -154px -250px;
  position:absolute;
  right:-2px;
  top:0px;
 }
 .MonthRightOver{
  width:14px;
  height:50px;
  background:url('images/static.png') -168px -250px;
  position:absolute;
  right:-2px;
  top:0px;
 }
 .MonthRightClick{
  width:14px;
  height:50px;
  background:url('images/static.png') -182px -250px;
  position:absolute;
  right:-2px;
  top:0px;
 }
 
 /*###### Bouton haut des années ######*/ 
 
 .YearTop{
  width:14px;
  height:25px;
  background:url('images/static.png') -196px -250px;
  position:absolute;
  right:-2px;
  top:0px;
 }
 .YearTopOver{
  width:14px;
  height:25px;
  background:url('images/static.png') -210px -250px;
  position:absolute;
  right:-2px;
  top:0px;  
 }
 .YearTopClick{
  width:14px;
  height:25px;
  background:url('images/static.png') -224px -250px;
  position:absolute;
  right:-2px;
  top:0px;  
 }
 /*###### Bouton bas des années ######*/ 
 
 .YearBottom{
  width:14px;
  height:25px;
  background:url('images/static.png') -196px -275px;
  position:absolute;
  right:-2px;
  bottom:0px;  
 }
 .YearBottomOver{
  width:14px;
  height:25px;
  background:url('images/static.png') -210px -275px;
  position:absolute;
  right:-2px;
  bottom:0px;   
 }
 .YearBottomClick{
  width:14px;
  height:25px;
  background:url('images/static.png') -224px -275px;
  position:absolute;
  right:-2px;
  bottom:0px;   
 }
 /*###### conteneur principal ######*/ 
 .calendar{
  width:300px;
  height:250px;
  background:url('images/static.png') no-repeat;
  position:absolute;
  left:400px;
  font-weight:bold;
  font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
  font-size:11px;
  text-align:center;
 }
 
 .contentMonth{
  width:130px;
  height:50px;
  background:url('images/static.png') -100px -300px repeat-x;
  position:absolute;
  left:85px;
  top:5px;
 }
 .pMonth{
  width:130px;
  height:50px;
  line-height:50px;
  display:block;
 }
 .contentDay{
  width:56px;
  height:50px;
  line-height:25px;
  text-align:center;
  background:url('images/static.png') 0px -250px;
  position:absolute;
  left:15px;
  top:5px;
 }
 .contentYear{
  width:56px;
  height:50px;
  background:url('images/static.png') -56px -250px;
  position:absolute;
  left:230px;
  top:5px;
 }
 .pYear{
  width:42px;
  height:50px;
  line-height:50px;
  display:block;
 }
 .contentListDay{
  width:290px;
  height:155px;
  overflow:hidden;
  position:absolute;
  left:5px;
  top:90px;

 }
 .contentListDay ul{
  width:100%;
  height:100%;
  position:absolute;
  margin:0px;
  padding:2px 0px 0px 1px;
 }
 .dayCurrent{
  width:41px;
  height:25px;
  line-height:25px;
  display:block;
  float:left;
  text-align:center;
  color:#000000;
  font-weight:bold;
  background:url('images/static.png') -41px -352px;
 }
 .liOut{
  width:41px;
  height:25px;
  line-height:25px;
  display:block;
  float:left;
  text-align:center;
  color:#000000;
  font-weight:bold;
  background:url('images/static.png') 0px -352px;
  cursor:pointer;
 }
 .liHover{
  width:41px;
  height:25px;
  line-height:25px;
  display:block;
  float:left;
  text-align:center;
  color:#000000;
  font-weight:bold;
  background:url('images/static.png') -41px -352px;
  cursor:pointer;
 }
 .liInactive{
  width:41px;
  height:25px;
  line-height:25px;
  display:block;
  float:left;
  text-align:center;
  color:#000000;
  font-weight:bold;
  background:url('images/static.png') -82px -352px;
 }
 .contentNameDay{
  width:290px;
  height:27px;
  line-height:27px;
  overflow:hidden;
  position:absolute;
  left:5px;
  top:63px;
  padding:0px;
  margin:0px;
  list-style:none;
 }
 
 .contentNameDay li{
  width:41px;
  display:block;
  float:left;
  text-align:center;
  color:#000000;
  font-weight:bold;
 }

 .bugFrame{
  position:absolute;
  top:0px;
  left:0px;
  background:url('images/static.png') no-repeat;
  z-index:0;
  width:100%;
  height:100%;
  border:0px;
 }
</style>
<script type="text/javascript">
 var calendarElement, calendarDestruct = false, preventDouble = true;
 document.onclick = function(e){
  var source=window.event?window.event.srcElement:e.target;
  if(!source.calendrier && calendarDestruct && preventDouble){
   calendarDestruct = false;
   calendarElement.calendarActive = false;
   while (document.getElementById('Calendrier').childNodes.length>0) {
    document.getElementById('Calendrier').removeChild(document.getElementById('Calendrier').firstChild);
   }
   document.body.removeChild(document.getElementById('Calendrier'));
  }
  else if(!preventDouble){preventDouble = true}
 }
 function calendar(element){
  var regTest = /Debut|Fin$/;
  if(regTest.test(element.id)){
   this.allowFullMonth = true;
   this.destinations = [element.id.replace(regTest, 'Debut'), element.id.replace(regTest, 'Fin')];
  }
  if(document.getElementById('Calendrier') && element != calendarElement){
   while (document.getElementById('Calendrier').childNodes.length>0) {
    document.getElementById('Calendrier').removeChild(document.getElementById('Calendrier').firstChild);
   }
   document.body.removeChild(document.getElementById('Calendrier'));
   calendarElement.calendarActive = false;
   preventDouble = false;
  }
  else{preventDouble = true;}
  calendarElement = element;
  if(!element.calendarActive){
  //Propriété de la date ( année , mois etc ... )
  this.monthCurrent = null;
  this.yearCurrent = null;
  this.dayCurrent = null;
  this.dateCurrent = null;
  //Le timer pour les effet ( fade in ^^ )
  this.timer = null;
  /*###### Objet composant le calendrier ######*/
  // la div principale
  this.calendar = null;
  
  this.bugFrame = null;
  //div contenant les mois ainsi que les deux boutons suivant et précédent
  this.contentMonth = null;
  this.currMonth = null;
  this.pMonth = null;
  this.MonthLeft = null;
  this.MonthRight = null;
  
  //Div contenant l'année ainsi que les deux boutons
  this.contentYear = null;
  this.pYear = null;
  this.YearTop = null;
  this.YearBottom = null;
  
  //Div contenant le nom des jours
  this.contentNameDay = null;
  
  //Div contenant la liste des jours
  this.contentListDay = null;
  
  /*###### FIN des Objet du calendrier ######*/
  
  //Liste des dates courantes
  this.from = null;
  //Liste des dates suivantes
  this.to = null;
  
  this.opacite = 0 ;
  this.direction = null;
  //Variable permettant de mettre a  jour le header + slide
  this.inMove = false;
  //Tableau d'élément a déplacé
  this.elementToSlide = new Array();
  //Index de l'élément en cours
  this.currentIndex = 0;
  //Paramètre pour lancement automatique
  this.timePause = 0 ; //permet de définir le temps de pause entre deux slide
  this.auto = false ; //Permet d'activer ou non le slide automatique
 
  //Input sur lequel on a cliqué
  this.element = (element) ? element: null;
  element.calendarActive = true;
  //Tableaux contenant le nom des mois et jours
  this.monthListName = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
  this.dayListName = new Array('Lu','Ma','Me','Je','Ve','Sa','Di');
  this.dayFullName = new Array('Lun','Mar','Mer','Jeu','Ven','Sam','Dim');
   
  this.IsIE=!!document.all;
  
  this.init();
  }
 }
 
 calendar.prototype.init = function (){
  var me = this;
  //On créer une div principale
  this.calendar = this.newElement({"typeElement":"div","classeCss":"calendar","parent":null});
  this.calendar.id = 'Calendrier';
  //Pour combler un bug ie , on doit ajouter les filtres d'opacité
  //Ajout du filtre
       if(this.IsIE)
       {
         this.calendar.style.filter='alpha(opacity=0)';
         this.calendar.filters[0].opacity=0;
       }
       else
       {
         this.calendar.style.opacity='0';
       }
  //Création d'une frame pour combler un bug lié aux liste sous ie
  this.bugFrame = this.newElement({"typeElement":"iframe","classeCss":"bugFrame","parent":this.calendar});
  //Création d'une divContenant le fond  pour combler un bug sous ie
  var temp = this.newElement({"typeElement":"div","classeCss":"bugFrame","parent":this.calendar});
  //Création des contenants ( mois , année , jours , listes jours etc ... )

  this.contentDay = this.newElement({"typeElement":"div","classeCss":"contentDay","parent":this.calendar});
  this.contentMonth = this.newElement({"typeElement":"div","classeCss":"contentMonth","parent":this.calendar});
  this.currMonth = this.newElement({"typeElement":"div","classeCss":"currMonth","parent":this.contentMonth});
  this.pMonth = this.newElement({"typeElement":"span","classeCss":"pMonth","parent":this.currMonth});
  this.contentYear = this.newElement({"typeElement":"div","classeCss":"contentYear","parent":this.calendar});
  this.pYear = this.newElement({"typeElement":"span","classeCss":"pYear","parent":this.contentYear});
  this.contentNameDay = this.newElement({"typeElement":"ul","classeCss":"contentNameDay","parent":this.calendar});
  this.contentListDay = this.newElement({"typeElement":"div","classeCss":"contentListDay","parent":this.calendar});
  
  //Ajout des éléments dans les conteneurs ( bouton + initialisation des dates )
  this.MonthLeft = this.newElement({"typeElement":"div","classeCss":"MonthLeft","parent":this.contentMonth});
  this.MonthRight = this.newElement({"typeElement":"div","classeCss":"MonthRight","parent":this.contentMonth});
  //Ajout des évènements sur les div
  this.MonthLeft.onclick = function(){me.updateMonthBefNexCur("before");me.SlideToRight();return false};
  this.MonthRight.onclick = function(){me.updateMonthBefNexCur("next");me.SlideToLeft();return false};
  if(this.allowFullMonth){
   this.currMonth.style.cursor = 'pointer';
   this.currMonth.onclick = function(){
    document.getElementById(me.destinations[0]).value = "1/"+ ((me.monthCurrent+1 == 13) ? 1:me.monthCurrent+1)+"/"+me.yearCurrent;
    document.getElementById(me.destinations[1]).value = me.day_number[me.monthCurrent]+ '/' + ((me.monthCurrent+1 == 13) ? 1:me.monthCurrent+1)+"/"+me.yearCurrent;
    calendarDestruct = false;
    calendarElement.calendarActive = false;
    while (document.getElementById('Calendrier').childNodes.length>0) {
     document.getElementById('Calendrier').removeChild(document.getElementById('Calendrier').firstChild);
    }
    document.body.removeChild(document.getElementById('Calendrier'));
   }
  }
  
  this.YearTop = this.newElement({"typeElement":"div","classeCss":"YearTop","parent":this.contentYear});
  this.YearBottom = this.newElement({"typeElement":"div","classeCss":"YearBottom","parent":this.contentYear});
  
  this.YearTop.onclick = function(){me.updateYearBefNexCur("next");me.SlideToTop();return false};
  this.YearBottom.onclick = function(){me.updateYearBefNexCur("before");me.SlideToBottom();return false};
  if(this.allowFullMonth){
   this.pYear.style.cursor = 'pointer';
   this.pYear.onclick = function(){
    document.getElementById(me.destinations[0]).value = "1/1/"+me.yearCurrent;
    document.getElementById(me.destinations[1]).value = "31/12/"+me.yearCurrent;
    calendarDestruct = false;
    calendarElement.calendarActive = false;
    while (document.getElementById('Calendrier').childNodes.length>0) {
     document.getElementById('Calendrier').removeChild(document.getElementById('Calendrier').firstChild);
    }
    document.body.removeChild(document.getElementById('Calendrier'));
   }
  }
  
  //Ajout des évènements liés au survol et appuis de la souris sur les éléments;
  this.MonthLeft.onmouseover = function(){this.className = "MonthLeftOver"};
  this.MonthLeft.onmouseout = function(){this.className = "MonthLeft"};
  this.MonthLeft.onmousedown = function(){this.className = "MonthLeftClick"};
  this.MonthLeft.onmouseup = function(){this.className = "MonthLeftOver"};
  
  this.MonthRight.onmouseover = function(){this.className = "MonthRightOver"};
  this.MonthRight.onmouseout = function(){this.className = "MonthRight"};
  this.MonthRight.onmousedown = function(){this.className = "MonthRightClick"};
  this.MonthRight.onmouseup = function(){this.className = "MonthRightOver"};
  
  this.YearTop.onmouseover = function(){this.className = "YearTopOver"};
  this.YearTop.onmouseout = function(){this.className = "YearTop"};
  this.YearTop.onmousedown = function(){this.className = "YearTopClick"};
  this.YearTop.onmouseup = function(){this.className = "YearTopOver"};
  
  this.YearBottom.onmouseover = function(){this.className = "YearBottomOver"};
  this.YearBottom.onmouseout = function(){this.className = "YearBottom"};
  this.YearBottom.onmousedown = function(){this.className = "YearBottomClick"};
  this.YearBottom.onmouseup = function(){this.className = "YearBottomOver"};
  
  //Récupération de la date du champs sinon date par défaut
  
  //Si l'élément sur lequel on a cliquez n'est pas vide on extrait la date
  if(this.element != null && this.element.value != ""){
   var reg=new RegExp("/", "g");
   var dateOfField = this.element.value;
   var dateExplode = dateOfField.split(reg);
   this.dateCurrent = this.getDateCurrent(dateExplode[0], dateExplode[1] - 1,dateExplode[2]);
  }
  else{
   this.dateCurrent = this.getDateCurrent();
  }
  
  //Récupération de la date du champs , sinon création d'une nouvelle;
  this.monthCurrent = this.dateCurrent.getMonth();
  this.yearCurrent = this.dateCurrent.getFullYear();
  this.dayCurrent = this.dateCurrent.getDate();
  
  //Création du mois courant
  this.from = this.createContentDay(0,"left");
  this.createMonth({"CurrentDay":this.dayCurrent,"CurrentMonth":this.monthCurrent,"CurrentYear":this.yearCurrent,"conteneur":this.from});
  //Création de la div qui défilera  On le remplira au moment ou on en aura besoins
  this.to = this.createContentDay(parseInt(this.calendar.offsetWidth),"left");
  this.createMonth({"CurrentDay":this.dayCurrent,"CurrentMonth":this.monthCurrent,"CurrentYear":this.yearCurrent,"conteneur":this.to});
  
  //On ajoute les éléments souhaités ( ici un tableau )  on peut utiliser la méthode AddElement pour ajouter un seul élément. on peut ajouter un id ou directement l'élément ;-)
  this.AddElements(Array(this.from,this.to));
  
  //Création de l'entete
  this.createHeader();
  this.updateDateHeader();
  
  //Positionnement du calendrier
  this.getPosition();
  
  //Apparition
  this.fadePic(0,true);
 }
 
 calendar.prototype.getDateCurrent = function (day,month,year){
   
   //Aujourd'hui si month et year ne sont pas renseignés
   if(year == null || month == null){
    return (new Date());
   }
   
   else{
    //Création d'une date en fonction de celle passée en paramètre
    return (new Date(year, month , day));
   }
 }
 
 calendar.prototype.newElement = function (parameter){
  var typeElement = parameter['typeElement'];
  var classToAffect = parameter['classeCss'];
  var parent = parameter['parent'];
  
  var newElement = document.createElement(typeElement);
  newElement.className = classToAffect;
  newElement.calendrier = true;
  if(parent == null){
   document.body.appendChild(newElement);
  }
  else{
   parent.appendChild(newElement);
  }
  return newElement;
 }

 calendar.prototype.createMonth = function(parameter){
  //Récupération des paramètres
  var CurrentDay = parameter["CurrentDay"];
  var CurrentMonth = parameter["CurrentMonth"];
  var CurrentYear = parameter["CurrentYear"];
  var conteneur = parameter["conteneur"];
  
  //On commence par détruire toute les date du conteneur :)
  /*for(var i = 0 , l = conteneur.childNodes.length; i < l;i++ ){
   conteneur.removeChild(conteneur.childNodes[i]);
  }*/
  while (conteneur.childNodes.length>0) {
   conteneur.removeChild(conteneur.firstChild);
  }
  //conteneur.innerHTML = '';
  
  //Appel de la méthode getDateCurrent retournant la date courante ou la date passé en paramètre
  var dateCurrent = this.getDateCurrent(CurrentDay,CurrentMonth,CurrentYear);
  
  //Mois actuel
  var monthCurrent = dateCurrent.getMonth()
  
  //Année actuelle
  var yearCurrent = dateCurrent.getFullYear();
  
  //Jours actuel
  var dayCurrent = dateCurrent.getDate();
  
  // On récupère le premier jour de la semaine du mois
  var dateTemp = new Date(yearCurrent, monthCurrent,1);
  
  //test pour vérifier quel jour était le premier du mois par rapport a la semaine
  this.current_day_since_start_week = (( dateTemp.getDay()== 0 ) ? 6 : dateTemp.getDay() - 1);
  
  //On initialise le nombre de jour par mois et on vérifis si l'on est au mois de février
  var nbJoursfevrier = (yearCurrent % 4) == 0 ? 29 : 28;
  //Initialisation du tableau indiquant le nombre de jours par mois
  this.day_number = new Array(31,nbJoursfevrier,31,30,31,30,31,31,30,31,30,31);
  
  //On commence par ajouter les nombre de jours du mois précédent
  
  //Calcul des date en fonction du moi précédent
  
  var dayBeforeMonth = ((this.day_number[((monthCurrent == 0) ? 11:monthCurrent-1)]) - this.current_day_since_start_week)+1;
 
  for(i  = dayBeforeMonth ; i <= (this.day_number[((monthCurrent == 0) ? 11:monthCurrent-1)]) ; i ++){
   
   this.createDayInContent(i,false,false,conteneur);
  }
  
  //On remplit le calendrier avec le nombre de jour, en remplissant les premiers jours par des champs vides
  for(var nbjours = 0 ; nbjours < (this.day_number[monthCurrent] + this.current_day_since_start_week) ; nbjours++){
  //et enfin on ajoute les dates au calendrier
  //Pour gèrer les jours "vide" et éviter de faire une boucle on vérifit que le nombre de jours corespond bien au
  //nombre de jour du mois
   if(nbjours < this.day_number[monthCurrent]){
    if(dayCurrent == (nbjours+1)){
     this.createDayInContent(nbjours+1,true,true,conteneur);
    }
    else{
     this.createDayInContent(nbjours+1,false,true,conteneur);
    }
   }
  }
  
  //Calcul des date en fonction du moi suivant
  var nbCelRest = 42 - (this.day_number[monthCurrent]+this.current_day_since_start_week);
  
  for(i  = 0 ; i <  nbCelRest ; i ++){
   
   this.createDayInContent(i+1,false,false,conteneur);
  }

 }
 
 calendar.prototype.createDayInContent = function (dateDay,CurrentDay,active,conteneur){
  var me = this;
  //Création d'un li comprenant un noeud texte avec la date du jour
  var liDay = document.createElement("li");
  liDay.calendrier = true;
  var TextContent = document.createTextNode(dateDay);
  //Pour éviter les if else ....
  liDay.className = (CurrentDay) ? "dayCurrent":"liOut";
  liDay.className = (!active) ? "liInactive":liDay.className;
  liDay.appendChild(TextContent);
  //Ajout du survol :)
  if(active){
   liDay.onmouseover = function(){this.className = (this.className == "dayCurrent") ? this.className : "liHover";};
   liDay.onmouseout = function(){this.className = (this.className == "dayCurrent") ? this.className : "liOut";};
   liDay.onclick = function(){me.dayCurrent = this.innerHTML ; me.fillField()};
  }
  //Ajout de l'élément dans la liste
  conteneur.appendChild(liDay);
 }
 
 calendar.prototype.createContentDay = function (positionTo,position){
  //Création d'un li comprenant un noeud texte avec la date du jour
  var ulDays = document.createElement("ul");
  ulDays.calendrier = true;
  ulDays.className = "dayCal";
  
  if(position != "top"){
   if(positionTo != null){ulDays.style.left = positionTo + "px";}
   ulDays.style.top = 0 + "px";
  }
  else{
   if(positionTo != null){ulDays.style.top = positionTo + "px";}
   ulDays.style.left = 0 + "px";
  }
  this.contentListDay.appendChild(ulDays);
  return ulDays;
 }
 
 calendar.prototype.createCalendar = function (){
  //Création d'un li comprenant un noeud texte avec la date du jour
  var divContent = document.createElement("div");
  divContent.calendrier = true;
  divContent.className = "calendrier";
  document.body.appendChild(divContent);
  return divContent;
 }
 
 calendar.prototype.createHeader = function(){

  //Ajout des jours
  for(var i = 0 , l = this.dayListName.length ; i < l ; i++){
   var liDayTemp = document.createElement("li");
   liDayTemp.calendrier = true;
   TextContent = document.createTextNode(this.dayListName[i]);
   liDayTemp.appendChild(TextContent);
   //Ajout du jour dans la liste
   this.contentNameDay.appendChild(liDayTemp);
  }
 }
 
 calendar.prototype.updateDateHeader = function(){
  var me = this ;
  //On commence par détruire tous les enfants des mois et années
  while (this.pMonth.childNodes.length>0) {
   this.pMonth.removeChild(this.pMonth.firstChild);
  }
  
  while (this.pYear.childNodes.length>0) {
   this.pYear.removeChild(this.pYear.firstChild);
  }
  
  while (this.contentDay.childNodes.length>0) {
   this.contentDay.removeChild(this.contentDay.firstChild);
  }
  
  //Ajout de la date du jour
  var nomDuJour =  this.dayFullName[((this.dateCurrent.getDay()-1) == -1) ? 6 :(this.dateCurrent.getDay()-1)];
  var TextContent = document.createTextNode(nomDuJour);
  this.contentDay.appendChild(TextContent);
  var retourLigne = document.createElement("br");
  this.contentDay.appendChild(retourLigne);
  TextContent = document.createTextNode(this.dayCurrent);
  this.contentDay.appendChild(TextContent);
  
  
  //Ajout du mois 
  TextContent = document.createTextNode(this.monthListName[(this.monthCurrent == 12) ? 0:this.monthCurrent]);
  this.pMonth.appendChild(TextContent);
  
  //Ajout de l'année 
  TextContent = document.createTextNode(this.yearCurrent);
  this.pYear.appendChild(TextContent);
 }
 
 calendar.prototype.updateMonthBefNexCur = function(direction){
   
   if(!this.inMove){
    if(this.timer == null){
     if(direction == "next"){
      this.updateDate("next");
      this.direction = "left";
      //on le remplit
      this.createMonth({"CurrentDay":this.dayCurrent,"CurrentMonth":this.monthCurrent,"CurrentYear":this.yearCurrent,"conteneur":this.to});
     }
     else if(direction == "before"){
      this.updateDate("before");
      this.direction = "right";
      this.createMonth({"CurrentDay":this.dayCurrent,"CurrentMonth":this.monthCurrent,"CurrentYear":this.yearCurrent,"conteneur":this.to});
      
     }
    }
    //On positionne la div
    this.Positionne();
   }
 }
 
 calendar.prototype.updateYearBefNexCur = function(direction){
   if(!this.inMove){
    if(this.timer == null){
     if(direction == "next"){
      this.yearCurrent++;
      this.direction = "top";
      //on le remplit
      this.createMonth({"CurrentDay":this.dayCurrent,"CurrentMonth":this.monthCurrent,"CurrentYear":this.yearCurrent,"conteneur":this.to});
     }
     else if(direction == "before"){
      this.yearCurrent--;
      this.direction = "bottom";
      this.createMonth({"CurrentDay":this.dayCurrent,"CurrentMonth":this.monthCurrent,"CurrentYear":this.yearCurrent,"conteneur":this.to});
      
     }
    }
    //Mise a jour de la date courante : 
    this.dateCurrent = new Date(this.yearCurrent, this.monthCurrent,this.dayCurrent);
    this.dateCurrent.setDate(this.dayCurrent);
    this.updateDateHeader();
    this.Positionne();
   }
 }
 
 calendar.prototype.updateDate = function(direction){
  if(this.timer == null){
   if(direction == "before"){
   //on calcul les dates suivante et précédente
    if(this.monthCurrent == 0){
     this.monthCurrent = 11;
    }
    else{
     this.monthCurrent = this.monthCurrent - 1 ;
    }
    this.yearCurrent = (this.monthCurrent == 11 ) ? this.yearCurrent - 1:this.yearCurrent;
   }
   else{
   //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on ajoute une année
    if(this.monthCurrent == 11){
     this.monthCurrent = 0;
   
    }
    else{
     this.monthCurrent =this.monthCurrent + 1;
    }
    this.yearCurrent = (this.monthCurrent == 0) ?  this.yearCurrent+1:this.yearCurrent;
   }
   
   //Mise a jour de la date courante : 
   this.dateCurrent = new Date(this.yearCurrent, this.monthCurrent,this.dayCurrent);
   this.dateCurrent.setDate(this.dayCurrent);
   this.updateDateHeader();
  }
 }
 
 //Fonction permettant de trouver la position de l'élément ( input ) pour pouvoir positioner le calendrier
 calendar.prototype.getPosition = function() {
 var tmpLeft = this.element.offsetLeft;
 var tmpTop = this.element.offsetTop;
 var MyParent = this.element.offsetParent;
 while(MyParent) {
  tmpLeft += MyParent.offsetLeft;
  tmpTop += MyParent.offsetTop;
  MyParent = MyParent.offsetParent;
 }
  this.calendar.style.left = tmpLeft + "px";
  this.calendar.style.top = tmpTop +  this.element.offsetHeight + 2 +"px";
 }
 
 calendar.prototype.fillField = function(){
  this.element.value = this.dayCurrent+"/"+ ((this.monthCurrent+1 == 13) ? 1:this.monthCurrent+1)+"/"+this.yearCurrent;
  //On détruit le calendrier;
  while (this.calendar.childNodes.length>0) {
   this.calendar.removeChild(this.calendar.firstChild);
  }
  document.body.removeChild(this.calendar);
  this.element.calendarActive = false;
  calendarDestruct = false;
 }
 /*##########################################################
 ############  METHODES PERMETTANT DE SCROLLER LES DATES  ##############
 ##########################################################*/
 //Permet de récupérer un élément par id
 calendar.prototype.$ = function(element){
  return document.getElementById(element);
 };
 
 //Méthode permettant de lancer les animations si en auto :)
 calendar.prototype.go = function(){
  if(this.auto){
   switch (this.direction ){
    case 'left':
     this.SlideToLeft();
    break;
    case 'right':
     this.SlideToRight();
    break;
    case 'top':
     this.SlideToTop();
    break;
    case 'bottom':
     this.SlideToBottom();
    break;
   }
  }
 }
 
 //Méthode permettant d'ajouter un élément
 calendar.prototype.AddElement = function(element){
  if(typeof(element) == "string"){
   this.elementToSlide.push(this.$(element));
  }
  else if(typeof(element) == "object"){
   this.elementToSlide.push(element);
  }
 }
 
 //Méthode permettant d'ajouter plusieurs élément d'un coup
 calendar.prototype.AddElements = function (elements){
  for(var i = 0 , l = elements.length; i < l ;i++){
   this.AddElement(elements[i]);
  }
 }
 
 //Méthode permettant de déplacer les éléments vers la gauche
 calendar.prototype.SlideToLeft = function(){
  if((this.direction == null || this.direction == 'left') && this.opacite >= 100){
   var me = this ;
   //On vérifit la direction pour initialiser le positionnement
   if(this.direction != 'left'){
     this.direction = 'left';
     if(this.timer == null){
      this.Positionne();
     }
   }
   else if(this.direction == 'left' && this.auto && this.timer == null){
    this.Positionne();
   }
   
   if(this.timer != null){
    clearTimeout(this.timer);
    this.timer = null;
   }
   //Si le timer n'est pas finit on détruit l'ancienne div
   if(parseInt(this.from.style.left) == Number.NaN || (parseInt(this.from.parentNode.offsetWidth) + parseInt(this.from.style.left))> 0){
    this.from.style.left = parseInt(this.from.style.left) - 15 + "px";
    this.to.style.left  =parseInt(this.to.style.left) - 15 + "px";
    this.inMove = true;
    this.timer = setTimeout(function(){me.SlideToLeft()},25);
    
   }
   else{
    clearTimeout(this.timer);
    this.timer = null;
    this.currentIndex = (this.currentIndex == (this.elementToSlide.length-1)) ? 0:this.currentIndex + 1;
    this.Positionne();
    this.direction = null;
    this.inMove = false;
   }
  }
 };
 
 //Méthode permettant de déplacer les éléments vers la droite
 calendar.prototype.SlideToRight = function(){
  var me = this ;
  if((this.direction == null || this.direction == 'right') && this.opacite >= 100){
    if(this.direction != 'right'){
     this.direction = 'right';
     if(this.timer == null){
      this.Positionne();
     }
    }
    else if(this.direction == 'right' && this.auto && this.timer == null){
     this.Positionne();
    }
    
    if(this.timer != null){
     clearTimeout(this.timer);
     this.timer = null;
    }
    //Si le timer n'est pas finit on détruit l'ancienne div
    if(parseInt(this.from.style.left) == Number.NaN ||  parseInt(this.from.style.left) < parseInt(this.from.parentNode.offsetWidth)){
     this.from.style.left = parseInt(this.from.style.left) + 15 + "px";
     this.to.style.left  =parseInt(this.to.style.left) + 15 + "px";
     this.inMove = true;
     this.timer = setTimeout(function(){me.SlideToRight()},25);
    }
    else{
     clearTimeout(this.timer);
     this.timer = null;
     this.currentIndex = (this.currentIndex == 0) ? this.elementToSlide.length-1:this.currentIndex - 1;
     this.Positionne();
     this.direction = null;
     this.inMove = false;
    }
  }
  

 };
 
 //Méthode permettant de déplacer les éléments vers la gauche
 calendar.prototype.SlideToTop = function(){
  var me = this ;
  if((this.direction == null || this.direction == 'top') && this.opacite >= 100){
   //On vérifit la direction pour initialiser le positionnement
   if(this.direction != 'top'){
     this.direction = 'top';
     if(this.timer == null){
      this.Positionne();
     }
   }
   if(this.timer != null){
    clearTimeout(this.timer);
    this.timer = null;
   }
   //Si le timer n'est pas finit on détruit l'ancienne div
   if(parseInt(this.from.style.top) == Number.NaN || (parseInt(this.from.style.top) > - parseInt(this.from.parentNode.offsetHeight))){
    this.from.style.top = parseInt(this.from.style.top) - 15 + "px";
    this.to.style.top  =parseInt(this.to.style.top) - 15 + "px";
    this.inMove = true;
    this.timer = setTimeout(function(){me.SlideToTop()},25);
   }
   else{
    clearTimeout(this.timer);
    this.timer = null;
    this.currentIndex = (this.currentIndex == 0) ? this.elementToSlide.length-1:this.currentIndex - 1;
    this.Positionne();     
    this.direction = null;
    this.inMove = false;
   }
  }
 };
 
 //Méthode permettant de déplacer les éléments vers le bas
 calendar.prototype.SlideToBottom = function(){
  var me = this 
  if((this.direction == null || this.direction == 'bottom') && this.opacite >= 100){
   //On vérifit la direction pour initialiser le positionnement
   if(this.direction != 'bottom'){
     this.direction = 'bottom';
     if(this.timer == null){
      this.Positionne();
     }
   }
   if(this.timer != null){
    clearTimeout(this.timer);
    this.timer = null;
   }
   //Si le timer n'est pas finit on détruit l'ancienne div
   if(parseInt(this.from.style.top) == Number.NaN || parseInt(this.from.style.top) < parseInt(this.from.parentNode.offsetHeight)){
    this.from.style.top = parseInt(this.from.style.top) + 15 + "px";
    this.to.style.top  =parseInt(this.to.style.top) + 15 + "px";
    this.inMove = true;
    this.timer = setTimeout(function(){me.SlideToBottom()},25);
   }
   else{
    clearTimeout(this.timer);
    this.timer = null;
    this.currentIndex = (this.currentIndex == this.elementToSlide.length-1) ? 0:this.currentIndex + 1;
    this.Positionne();
    this.direction = null;
    this.inMove = false;
   }
  }
 };
 
 //Fonction initialisant le tableau en positionnant tous les éléments :)
 calendar.prototype.Positionne = function(){
  if(this.direction == 'left'){
   //On vérifit que l'on est pas a la fin sinon le premier devient le dernier
   if(this.currentIndex == this.elementToSlide.length-1){
    //récupération des éléments : 
    this.from = this.elementToSlide[this.currentIndex];
    this.to = this.elementToSlide[0]; //Premier élément
   }
   else{
    this.from = this.elementToSlide[this.currentIndex];
    this.to = this.elementToSlide[this.currentIndex + 1];
   }
    this.from.style.display = "block" ;
    this.from.style.left = 0 + "px";
    this.to.style.left = this.from.parentNode.offsetWidth + "px";
    this.to.style.display = "block";
    //Posionement vertical
    this.to.style.top = 0 + "px";
    this.from.style.top = 0 + "px" ;
  }
  else if(this.direction == 'right'){
   if(this.currentIndex == 0){
    this.from = this.elementToSlide[this.currentIndex];
    this.to = this.elementToSlide[this.elementToSlide.length-1]; // dernier élément
   }
   else{
    this.from = this.elementToSlide[this.currentIndex];
    this.to = this.elementToSlide[this.currentIndex-1];
   }
   this.from.style.display = "block" ;
   this.from.style.left = 0 + "px";
   this.to.style.left = - (this.from.parentNode.offsetWidth )+ "px";
   this.to.style.display = "block";
   //Posionement vertical
   this.to.style.top = 0 + "px";
   this.from.style.top = 0 + "px" ;
  }
  else if(this.direction == 'bottom'){
   if(this.currentIndex == this.elementToSlide.length-1){
    this.from = this.elementToSlide[this.currentIndex];
    this.to = this.elementToSlide[0]; // dernier élément
   }
   else{
    this.from = this.elementToSlide[this.currentIndex];
    this.to = this.elementToSlide[this.currentIndex+1];
   }
   this.from.style.display = "block" ;
   this.from.style.top = 0 + "px";
   this.to.style.top = - (this.from.parentNode.offsetHeight )+ "px";
   this.to.style.display = "block";
   //Posionement horizontal
   this.to.style.left = 0 + "px";
   this.from.style.left = 0 + "px" ;
  }
  else if(this.direction == 'top'){
   if(this.currentIndex == 0){
    this.from = this.elementToSlide[this.currentIndex];
    this.to = this.elementToSlide[this.elementToSlide.length-1]; // dernier élément
   }
   else{
    this.from = this.elementToSlide[this.currentIndex];
    this.to = this.elementToSlide[this.currentIndex-1];
   }
   this.from.style.display = "block" ;
   this.from.style.top = 0 + "px";
   this.to.style.top = (this.from.parentNode.offsetHeight )+ "px";
   this.to.style.display = "block";
   //Posionement horizontal
   this.to.style.left = 0 + "px";
   this.from.style.left = 0 + "px" ;
  }
 };

 calendar.prototype.fadePic = function (current,up){
  this.calendar.style.display = "block";
  this.opacite = current ;
  this.up = up ;
  
  if (this.opacite< 100 && this.up){
   this.opacite+=3;
   this.IsIE?this.calendar.filters[0].opacity=this.opacite:this.calendar.style.opacity=this.opacite/100;
   var me = this;
   this.timer = setTimeout(function(){me.fadePic(me.opacite,true)},25);
  }
  else{
   clearTimeout(this.timer);
   this.timer = null;
   this.up = false;
   calendarDestruct = true;
  }
 }
 </script>
</head>
<body>

exemple simple : 
<input type="text" id="input1" value="" onclick="new calendar(this);"><br />
un select juste en dessous : 
<select size="5">
 <option>123</option>
 <option>113</option>
 <option>223</option>
 <option>323</option>
 <option>2223</option>
 <option>1233</option>
 <option>12213</option><option>123</option>
 <option>122233</option>
 <option>333123</option>
</select>
<span style="border:1px solid red;position:absolute;top:200px;left:500px;">exemple via un positionement absolue dans un span <input id="input2" type="text" value="" onclick="new calendar(this);"></span>
<div>
<h3>Exemple avec une durée</h3>
<input type="text" style="cursor: pointer" onclick="new calendar(this);" value="Du :" id="dateDebut" />
<input type="text" style="cursor: pointer" onclick="new calendar(this);" value="Au :" id="dateFin" />
</div>
</body>


</html>

Pour que cela soit claire je vais expliquer ici tout mon problème mais on ne traitera que de la partie calendrier je créerai d'autre poste pour les autres partie.
Présentation de la page:

/-------------------------------------------------------------------------------
/
/ !MONTH! !YEAR! !WORKER! ! Name worker!^!
/
/ ! < Month> ! < Year > !______
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/
/_____________________________________________________________
/ !Onglet 1!!Onglet 2!!Onglet N!________________
/ !
/ !
/ !
/ !
/ !
/ !
/ !
/ !______________________________________________________!
/
/_____________________________________________________________
/-------------------------------------------------------------------------------

Voici se que je souhaite faire:
1- Avoir un calendrier présent en permanence sur la page
2- Lorsque j'appuie sur un jour du calendrier sa me créer un onglet "Daily timetable"+la date choisit, dans la partit basse de la page.
3- La date sélectionnée est récupérer et placer dans un input contenu dans le tableau qui se trouve dans l'onglet du jour.
4- Pour chaque date sélectionner un onglet est créer.

(Post pour les onglet :Calendrier : Création d'un onglet par jour)

Merci
Merci et que le café soit avec vous.
Afficher la suite 

7 réponses

Répondre au sujet
jordane45 20610 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 24 avril 2018 Dernière intervention - 1 avril 2014 à 02:51
+1
Utile
Bonjour,
Il existe plein d'exemples de calendriers "fixes".

http://www.tripwiremagazine.com/2012/11/jquery-calendar-date-pickers.html

http://keith-wood.name/datepick.html

http://www.eyecon.ro/datepicker/#about
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de jordane45
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 1 avril 2014 à 08:31
0
Utile
Merci je vais regarder se que tu a poster.
Commenter la réponse de EnguerrandP
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 1 avril 2014 à 09:06
0
Utile
2
Bonjour, après avoir regarder se que tu a poster je n'ai trouver que le lien :
http://keith-wood.name/datepick.html
qui correspondait à peu prés à se que je souhaite faire.

Est es que c'est possible de le faire en JavaScript?,De modifier le code que j'ai trouver pour que le calendrier soit toujours présent?

Merci
jordane45 20610 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 24 avril 2018 Dernière intervention - 1 avril 2014 à 09:28
Je ne comprend pas ta question....

De modifier le code que j'ai trouver pour que le calendrier soit toujours présent?
Dans le lien que tu as choisi... le calendrier reste bien visible en permanence ... qu'est-ce que tu veux modifier ?

Est es que c'est possible de le faire en JavaScript?
Ben.. c'est déjà du javascript..
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 1 avril 2014 à 10:03
Je ne peut pas te mettre les fichier js car les balise "code" bug avec
Commenter la réponse de EnguerrandP
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - Modifié par EnguerrandP le 1/04/2014 à 10:09
0
Utile
Je parlait du code de mon premier message de se poste,
car il me permet de faire plusieurs calendrier sur la même page, a la différence de celui-ci qui ne m'en permet qu'un seul.
<php  xmlns="http://www.w3.org/1999/xphp" xml:lang="fr">
<title>Main menu CAE </title>
<head>
 <meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />

 <link href="jquery.datepick.css" rel="stylesheet">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="jquery.plugin.js"></script>
 <script src="jquery.datepick.js"></script>
</head>

<body background="IMAGES/fond_M_CAE.jpg">
 <script>
  $(function() 
  {
   $('#popupDatepicker').datepick();
   $('#inlineDatepicker').datepick({onSelect: showDate});
  });

  function showDate(date) 
  {
  
  }
 </script>

 <h1>jQuery Datepicker</h1>
 <div id="inlineDatepicker"></div>
</body>
</php>



jquery.datepick.css

/* Default styling for jQuery Datepicker v5.0.0. */
.datepick {
 background-color: #fff;
 color: #000;
 border: 1px solid #444;
    border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
 font-family: Arial,Helvetica,Sans-serif;
 font-size: 90%;
}
.datepick-rtl {
 direction: rtl;
}
.datepick-popup {
 z-index: 1000;
}
.datepick-disable {
 position: absolute;
 z-index: 100;
 background-color: white;
 opacity: 0.5;
 filter: alpha(opacity=50);
}
.datepick a {
 color: #fff;
 text-decoration: none;
}
.datepick a.datepick-disabled {
 color: #888;
 cursor: auto;
}
.datepick button {
    margin: 0.25em;
    padding: 0.125em 0em;
    background-color: #fcc;
    border: none;
    border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    font-weight: bold;
}
.datepick-nav, .datepick-ctrl {
 float: left;
 width: 100%;
 background-color: #000;
 color: #fff;
 font-size: 90%;
 font-weight: bold;
}
.datepick-ctrl {
 background-color: #600;
}
.datepick-cmd {
 width: 30%;
}
.datepick-cmd:hover {
 background-color: #777;
}
.datepick-ctrl .datepick-cmd:hover {
 background-color: #f08080;
}
.datepick-cmd-prevJump, .datepick-cmd-nextJump {
 width: 8%;
}
a.datepick-cmd {
 height: 1.5em;
}
button.datepick-cmd {
 text-align: center;
}
.datepick-cmd-prev, .datepick-cmd-prevJump, .datepick-cmd-clear {
 float: left;
 padding-left: 2%;
}
.datepick-cmd-current, .datepick-cmd-today {
 float: left;
 width: 35%;
 text-align: center;
}
.datepick-cmd-next, .datepick-cmd-nextJump, .datepick-cmd-close {
 float: right;
 padding-right: 2%;
 text-align: right;
}
.datepick-rtl .datepick-cmd-prev, .datepick-rtl .datepick-cmd-prevJump,
.datepick-rtl .datepick-cmd-clear {
 float: right;
 padding-left: 0%;
 padding-right: 2%;
 text-align: right;
}
.datepick-rtl .datepick-cmd-current, .datepick-rtl .datepick-cmd-today {
 float: right;
}
.datepick-rtl .datepick-cmd-next, .datepick-rtl .datepick-cmd-nextJump,
.datepick-rtl .datepick-cmd-close {
 float: left;
 padding-left: 2%;
 padding-right: 0%;
 text-align: left;
}
.datepick-month-nav {
 float: left;
 background-color: #777;
 text-align: center;
}
.datepick-month-nav div {
 float: left;
 width: 12.5%;
 margin: 1%;
 padding: 1%;
}
.datepick-month-nav span {
 color: #888;
}
.datepick-month-row {
 clear: left;
}
.datepick-month {
 float: left;
 width: 15em;
 border: 1px solid #444;
 text-align: center;
}
.datepick-month-header, .datepick-month-header select, .datepick-month-header input {
 height: 1.5em;
 background-color: #444;
 color: #fff;
 font-weight: bold;
}
.datepick-month-header select, .datepick-month-header input {
 height: 1.4em;
 margin: 0em;
 padding: 0em;
 border: none;
 font-size: 100%;
}
.datepick-month-header input {
 position: absolute;
 display: none;
}
.datepick-month table {
 width: 100%;
 border-collapse: collapse;
}
.datepick-month thead {
 border-bottom: 1px solid #aaa;
}
.datepick-month th, .datepick-month td {
 margin: 0em;
 padding: 0em;
 font-weight: normal;
 text-align: center;
}
.datepick-month th {
 border: 1px solid #777;
}
.datepick-month th, .datepick-month th a {
 background-color: #777;
 color: #fff;
}
.datepick-month td {
 background-color: #eee;
 border: 1px solid #aaa;
}
.datepick-month td.datepick-week {
 border: 1px solid #777;
}
.datepick-month td.datepick-week * {
 background-color: #777;
 color: #fff;
 border: none;
}
.datepick-month a {
 display: block;
 width: 100%;
 padding: 0.125em 0em;
 background-color: #eee;
 color: #000;
 text-decoration: none;
}
.datepick-month span {
 display: block;
 width: 100%;
 padding: 0.125em 0em;
}
.datepick-month td span {
 color: #888;
}
.datepick-month td .datepick-other-month {
 background-color: #fff;
}
.datepick-month td .datepick-weekend {
 background-color: #ddd;
}
.datepick-month td .datepick-today {
 background-color: #f0c0c0;
}
.datepick-month td .datepick-highlight {
 background-color: #f08080;
}
.datepick-month td .datepick-selected {
 background-color: #777;
 color: #fff;
}
.datepick-month th.datepick-week {
 background-color: #777;
 color: #fff;
}
.datepick-status {
 clear: both;
 background-color: #ddd;
 text-align: center;
}
.datepick-clear-fix {
 clear: both;
}
#inlineDatepicker
{
 margin-top: 15px;
    margin-left:150px;          
}

merci
Commenter la réponse de EnguerrandP
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - Modifié par EnguerrandP le 1/04/2014 à 11:23
0
Utile
Bonjour, j'ai trouver comment ajouter des calendrier avec le code du lien : http://keith-wood.name/datepick.html

Je n'ai plus cas trouver comment récupérer les dates sélectionner pour chaque calendrier.

La solution : il faut ajouter une ligne:
$('#inlineDatepicker+X').datepick({onSelect: showDate});


dans la fonction :
		$(function() 
		{
			$('#popupDatepicker').datepick();
			$('#inlineDatepicker').datepick({onSelect: showDate});
			$('#inlineDatepicker2').datepick({onSelect: showDate});
		});

et une ligne div:
<div id="inlineDatepicker+X"></div>


Pour chaque calendrier que l'on souhaite ajouter

Merci

Merci et que le café soit avec vous.
Commenter la réponse de EnguerrandP

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.