EnguerrandP
Messages postés295Date d'inscriptionvendredi 26 avril 2013StatutMembreDernière intervention15 juillet 2015
-
Modifié par EnguerrandP le 31/03/2014 à 15:31
EnguerrandP
Messages postés295Date d'inscriptionvendredi 26 avril 2013StatutMembreDernière intervention15 juillet 2015
-
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:
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)
EnguerrandP
Messages postés295Date d'inscriptionvendredi 26 avril 2013StatutMembreDernière intervention15 juillet 20151 1 avril 2014 à 09:06
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
Messages postés38238Date d'inscriptionmercredi 22 octobre 2003StatutModérateurDernière intervention 6 septembre 2024345 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
Messages postés295Date d'inscriptionvendredi 26 avril 2013StatutMembreDernière intervention15 juillet 20151 1 avril 2014 à 10:03
Je ne peut pas te mettre les fichier js car les balise "code" bug avec
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.
