Bonsoir
Je n'arrive pas à faire afficher le calendrier de franckysolo (site du zero) je ne connais pas du tout le java. Si j'ai bien compris il devrait permettre de récupérer une date dans formulaire?
Merci pour l'aide
Le message qui suit est une réponse automatique activée par un modérateur.
Les réponses automatiques permettent d'éviter aux modérateurs d'avoir à répéter de nombreuses fois la même chose, et donc de leur faire gagner beaucoup de temps.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter le modérateur en question par MP.
Description insuffisante du problème
Bonjour,
Le modérateur ayant posté ce message estime que vous n'avez pas donné assez d'informations quant à votre problème.
Afin de faciliter la tâche aux membres qui souhaitent vous aider, il vous est demandé de fournir les erreurs obtenues, ou d'expliquer le comportement inhabituel de votre script. Vous contenter de fournir votre code en disant « ça ne marche pas » n'est pas suffisant.
Le modérateur vous invite donc à éditer votre message afin de le clarifier.
Dans le tuto il y a 4 scripts que j'ai copié mis dans 4 fichiers que j'ai rentré dans "test" de wamp server exactement comme je fais quand je veux tester un scrip. Comme nom de fichier j'ai donné "calendar .js" "calendar.css" "mootool.js" "calendar.html"
en appelant calendar.html j'ai la création d'une petite zone de texte mais nenni calendrier.
Je ne sais pas lire le javascript et n'ai rien compris au moontool.
Merci pour vos lumières
D'abord merci de mettre à disposition un calendrier qui j'espere marchera;
j'ai copié le fichier html, css, js.sur wamp test quand j'ouvre html j'ai la création d'une petite zone de texte mais je ne vois pas de calendrier;.
Dans ton code html apriori il appelle le fichier "calendar.js" il ne fait pas appel au code calendar css, (lien peut être dans le fichier js mais je ne sais pas le lire).
Je pense qu'il y a simplement une mise en forme que je n'ai pas fait dans ton code html. Peux tu me dire ce que je dois changer dans ton code html ou dans mes noms de fichier pour que tout cela marche.
Ok c'est de ma faute je viens de m'apercevoir que j'ai oublié d'ajouter la div contenant le calendar, j'ai corriger le tuto il st en validation sinon voici la solution en attendant il faut
juste ajouter une div : <divid="calendar-box"></div>
Toujours rien j'ai pourtant fait partout du copier coller 4 fichiers calendar.html (corrigé), calendar.css, calendar.js, moontool.js
toujours le même résultat.
re,
je viens de re-tester la source js issue du tuto pour voir s'il n'y avais pas d'erreur chez moi ça fonctionne bien j'ai vérifié sur IE, Firefox et Opéra.
Je ne sais pas quoi te dire surtout que tu n'as as répondu à mes questions?
Citation : franckysolo
hello,
[...]
As tu un debbuger type firebug si oui utilise le ça va t'aider à savoir d'où vient l'erreur sinon avec la console d'erreur
[...]
Ps :
attention à quelle version de mootools tu utilises sur le tuto j'utilise la version 1.2.4 et non la 1.3.0
franckysolo
ps : si je viens d'y penser mais la version mootools n'as pas besoin du fichier css le style est intégré dans la classe peut être le bug vient de là (conflit entre id)
Test le sans le Css
n'utilise pas le fichier css avec le calendar mootools,
Le fichier css est utile pour la version classique.
Tu n'as besoin que de mootools.js, calendar.js et ton fichier html.
Pour le reste, firebug est un plugin bien utile pour ce genre de problème tu devrais l'installer.
Citation
est ce que ça peut marcher?
Oui il fonctionne, vérifier sur IE, Firefox et Opéra
Par ailleurs je viens de relire mon tuto concernant le calendrier mootool, si tu lis bien le script
Ou vois tu que j'utilise le fichier css dans le script?
Désolé pas de debugger, et je ne sais pas quelle version moontools j'utilise.
je viens de tous recopier sur ton tuto: calendar.js, mootools.js, et le dernier html . J'ai la petite zone de texte, qd je clique dessus aucun calendrier n'apparait.
Je laisse tomber je ne m'y connais pas suffisamment en js je te fais perdre ton temps. j'utiliserai un calendrier dynamique avec une mise en service plus intuitive.
Merci
Téléchargé le framework mootools version core & more (version 1.2.4)
Pour savoir la version de mootools que utilise ouvre ton fichier mootools.js c'est la première ligne du fichier
var MooTools = {
'version': '1.2.4',
'build': '0d9113241a90b9cd5643b926795852a2026710d4'
};
Désolé pour toi si tu n'arrives pas à le faire fonctionner, tu n'as qu'as chercher "un calendrier dynamique avec une mise en service plus intuitive."...Tu trouveras certainement!!!
franckysolo
Le calendrier que j'utilise a un blème, je reviens donc vers toi pour le remplacer.
Je ne trouve pas la version mootools 1.2.4 pour l'utiliser, avec la version 1.2.5 ça ne marche pas. peux tu me filer le lien.
Il est vraiment dommage que le sdz ne fournisse pas le code de son calendrier!
merci
écoute tu vas rire je viens de tester (opera, firefox, IE) avec la 1.2.5 ça fonctionne chez moi comment fais tu?
j'ai pas tester avec la 1.3.0 mais à mon avis ça fonctionne aussi
Tu utilises quelle navigateur?
j'ai fais copier coller du tuto j'ai tout mis dans la même page et non problemo avec la 1.2.4 et 1.2.5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Calendrier mootools</title>
<script type="text/javascript" src="public/js/mootools-1.2.5.js"></script>
<script type="text/javascript">
var Calendar = new Class({
Implements : Options,
options : {
days : ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'],
months : ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
titles : ['Année suivante', 'Année précédente', 'Mois suivant', 'Mois précédent']
},
initialize: function(id, options) {
this.setOptions(options);
this.id = $(id);
this.box = $('calendar-box');
this.date = new Date();
this.timer = null;
this.days = this.options.days;
this.months = this.options.months;
this.titles = this.options.titles;
this.dayNumber = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
this.init();
},
//Initialisation des positions
init : function() {
$(this.id).setStyles({position : 'relative'});
var w = this.id.getSize().x.toInt();
var h = this.id.getSize().y.toInt();
var l = this.id.getPosition().x.toInt();
var t = this.id.getPosition().y.toInt();
this.box.setStyles({
position : 'absolute',
left : l+'px',
top : (h + t + 1)+'px'
});
this.table = this.setTable();
this.build(this.date.getMonth(), this.date.getFullYear());
this.box.fade('hide');
},
//Le tableau calendar
setTable : function() {
var table = new Element('table', {
id : 'calendar-table',
styles: {
backgroundColor : '#fff',
border: '1px solid #ccc',
'-moz-border-radius' : '4px',
width : '100%',
padding: 0,
margin : 0
}
});
return table;
},
//ajoute une balise th colspan 7 contenant les jours en lettres de lundi à dimanche
addTdHead : function(colspan, dayNumber) {
var td = new Element('th', {
colspan : (colspan != 0) ? colspan : 0,
html : dayNumber,
styles : {
border : '1px solid #ddd',
'-moz-border-radius' : '4px',
backgroundColor : '#eee'
}
});
return td;
},
//ajoute une balise td
addTd : function(dayNumber) {
var td = new Element('td', {
html : dayNumber,
styles : {
border : '1px solid #eee',
'-moz-border-radius' : '4px',
backgrounfColor : 'white',
'width' : '30px'
}
});
//effet de survol sur les numéros de jours et
//ajout de la date dans le champ id (en paramètre de la classe)
if(dayNumber >= 1 && dayNumber < 32) {
td.addEvents({
'mouseenter' : function() {
td.setStyles({'border-color': '#bbb', 'background-color' : '#eee'});
},
'mouseleave' : function() {
td.setStyles({'border-color': '#eee', 'background-color' : '#fff'});
},
'click' : function() {
var year = this.date.getFullYear();
var month = this.date.getMonth() + 1;
var t = this.format(dayNumber);
var m = this.format(month, 'd');
this.id.set('value', t+'/'+m+'/'+year);
}.bind(this)
});
}
return td;
},
//ajoute une balise tr
addTr: function() {
return new Element('tr');
},
//Ajoute un lien vers le mois et précédent
setMonthLink : function(type) {
var link = new Element('span', {
href : 'javascript: void(0)',
html : (type == 'prev') ? '«' : '»',
title : (type == 'prev') ? this.titles[3] : this.titles[2],
styles : {
fontWeight : 'bold',
margin : '10px',
cursor : 'pointer'
}
});
link.addEvent('click' , function() {
this.date.setMonth((type == 'prev') ? (this.date.getMonth() - 1) : (this.date.getMonth() + 1));
$('current-month').set('html', this.months[this.date.getMonth()]);
this.table.dispose();
this.table = this.setTable();
this.build(this.date.getMonth(), this.date.getFullYear());
}.bind(this));
return link;
},
//Ajoute un lien vers l'année suivante et précédente
setYearLink : function(type) {
var link = new Element('span', {
href : 'javascript: void(0)',
html : (type == 'prev') ? '<' : '>',
title : (type == 'prev') ? this.titles[1] : this.titles[0],
styles : {
fontWeight : 'bold',
margin : '10px',
cursor : 'pointer'
}
});
link.addEvent('click' , function() {
this.date.setFullYear((type == 'prev') ? (this.date.getFullYear() - 1) : (this.date.getFullYear() + 1));
$('current-year').set('html', this.date.getFullYear());
this.table.dispose();
this.table = this.setTable();
this.build(this.date.getMonth(), this.date.getFullYear());
}.bind(this));
return link;
},
//formate les 1 en 01, 2 en 02 etc...
format : function(n) {
if( n == 0)
n = "01";
if(n < 10)
n = "0"+n;
return n ;
},
//Le mois en cours affichée dans l'entête du tableau
currentMonth : function(id) {
var span = new Element('span', {
html : this.months[this.date.getMonth()],
id : 'current-month',
styles : {
marginRight : '10px'
}
});
return span;
},
//L'année en cours affichée dans l'entête du tableau
currentYear : function(id) {
var span = new Element('span', {
html : id,
id : 'current-year'
});
return span;
},
//Construction du calendrier
build : function(idMonth, idYear) {
var thead = this.addTr();
var tdHead = this.addTdHead(7);
tdHead.adopt(
this.setYearLink('prev'),
this.setMonthLink('prev'),
this.currentMonth(idMonth),
this.currentYear(idYear),
this.setMonthLink('next'),
this.setYearLink('next')
).inject(thead);
var tdays = this.addTr().setStyles({background : 'buttonface'});
var year = this.date.getFullYear();
var time = new Date();
time.setDate(1);
time.setMonth(this.date.getMonth());
time.setFullYear(this.date.getFullYear());
var firstday = time.getDay();
if( firstday == 0 ) firstday = 7;
var year = this.date.getFullYear();
var month = this.date.getMonth();
var bisextil = this.dayNumber.indexOf(1);
bisextil = ( year % 4 == 0 ) ? 29 : 28;
var today = this.date.getDate();
this.days.each(function(d, i){
var t = this.addTd(d).setStyles({
border : 'none',
'-moz-border-radius' : '0px',
fontWeight : 'bold'
}).inject(tdays);
}, this);
this.table.adopt(thead, tdays).inject(this.box);
for (var i = 1; i < 43 ; i++) {
var n = 0;
if((i - 1) % 7 == 0) {
var tr = this.addTr().inject(this.table);
}
if(i < firstday ) {
tr.adopt(this.addTd('').setStyle('border', 'none'));
} else if (i > firstday && i < 8 ) {
var td = this.addTd(i + 1 - firstday).setStyles({
color : ( i == today) ? 'red' : 'black',
cursor : 'pointer'
});
td.inject(tr);
} else if( i < this.dayNumber[this.date.getMonth()] + firstday) {
var td = this.addTd(i + 1 - firstday);
td.setStyles({
color : ( i == today) ? 'red' : 'black',
cursor : 'pointer'
}).inject(tr);
}
}
},
//Affiche le calendar
show : function() {
this.box.fade('in');
this.status = true;
this.timer = this.hide.delay(5000, this);
},
//Cache le calendar
hide : function() {
this.status = false;
this.box.fade('out');
},
//Ecoute les events
listeningEvents : function() {
$('calendar').addEvent('click', function(){
this.show();
}.bind(this));
$('calendar-table').addEvents({
'mouseenter' : function() {
clearInterval(this.timer);
}.bind(this),
'mouseleave' : function() {
this.hide();
clearInterval(this.timer);
}.bind(this)
});
}
});
window.addEvent('domready', function(){
var cal = new Calendar('calendar');
cal.listeningEvents();
});
</script>
</head>
<body>
<form method="post" action="">
<input type="text" id="calendar" name="date" />
<div id="calendar-box"></div>
</form>
</body>
</html>
Au fait t'as toujours pas debuguer pour js je présume?
voilà la version mootool que j'ai chargé:
MooTools.More={version:"1.2.5.1",build:"254884f2b83651bf95260eed5c6cceb838e22d8e"}
Je l'ai donc enregistrée sous le nom: mootools-1.2.5.js comme l'indique ton script. Ce script moontools et ton script calendrier mootools sont dans le même dossier dans test sur Wamp. A l'affichage je n'ai que la zone de texte quand je clique sur cette zone aucun calendrier n'apparait.
Il y a une base qui me manque!
ben si t'as repris le code juste de mon dernier post non il ne manque rien.
Sinon ce serait bien que tu répondes au questions que je te pose sinon on ne va pas avancé,
quel navigateur utilise -tu?
Si t'as firefox installe firebug et là on pouvoir comprendre ce qui se passe, sinon si tu utilises pour firefox et opéra la console d'erreur, pour Ie tu fais F12, dans ces trois cas tu as un débuguer javascript soit les chemins vers les sources sont faux, soit ton navigateur ne fonctionne pas avec ces versions de mootools mais ça voudrait dire que tu utilises un vielle version de navigateur ce que je doute en tout cas essaie de débuguer la réponse sera là
J'arrive à faire afficher ton calendrier, par contre dans le mois la date en rouge n'est pas la date d'aujourd'hui mais le 7 janvier à la place du 12 d'où vient l'erreur?
je voudrais faire afficher un message qd date choisie est < à aujourd'hui peux tu me le souffler dans l'oreille?
en tout cas merci
bon ça fonctionne alors!!!
il n'y a pas d'erreur dans le code j'affiche le numéro du jour actuel en rouge et non celui de la date sélectionnée
pour ton message tu veux le faire en php ou javascript?
bonjour
Pour mon message je pensais à du js en php je ne sais pas ce que cela peut donner comme affichage.
pour le problème de date, aujourd'hui c'est samedi 8 qui se met en rouge à la place de jeudi 13, je te joins ton script je n'ai modifié que la partie pure html en bas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Calendrier mootools</title>
<script type="text/javascript" src="mootools-1.2.5.js"></script>
<script type="text/javascript">
var Calendar = new Class({
Implements : Options,
options : {
days : ['Lun','Mar','Mer','Jeu','Ven','Sam','Dim'],
months : ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
titles : ['Année suivante', 'Année précédente', 'Mois suivant', 'Mois précédent']
},
initialize: function(id, options) {
this.setOptions(options);
this.id = $(id);
this.box = $('calendar-box');
this.date = new Date();
this.timer = null;
this.days = this.options.days;
this.months = this.options.months;
this.titles = this.options.titles;
this.dayNumber = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
this.init();
},
//Initialisation des positions
init : function() {
$(this.id).setStyles({position : 'relative'});
var w = this.id.getSize().x.toInt();
var h = this.id.getSize().y.toInt();
var l = this.id.getPosition().x.toInt();
var t = this.id.getPosition().y.toInt();
this.box.setStyles({
position : 'absolute',
left : l+'px',
top : (h + t + 1)+'px'
});
this.table = this.setTable();
this.build(this.date.getMonth(), this.date.getFullYear());
this.box.fade('hide');
},
//Le tableau calendar
setTable : function() {
var table = new Element('table', {
id : 'calendar-table',
styles: {
backgroundColor : '#fff',
border: '1px solid #ccc',
'-moz-border-radius' : '4px',
width : '100%',
padding: 0,
margin : 0
}
});
return table;
},
//ajoute une balise th colspan 7 contenant les jours en lettres de lundi à dimanche
addTdHead : function(colspan, dayNumber) {
var td = new Element('th', {
colspan : (colspan != 0) ? colspan : 0,
html : dayNumber,
styles : {
border : '1px solid #ddd',
'-moz-border-radius' : '4px',
backgroundColor : '#eee'
}
});
return td;
},
//ajoute une balise td
addTd : function(dayNumber) {
var td = new Element('td', {
html : dayNumber,
styles : {
border : '1px solid #eee',
'-moz-border-radius' : '4px',
backgrounfColor : 'white',
'width' : '30px'
}
});
//effet de survol sur les numéros de jours et
//ajout de la date dans le champ id (en paramètre de la classe)
if(dayNumber >= 1 && dayNumber < 32) {
td.addEvents({
'mouseenter' : function() {
td.setStyles({'border-color': '#bbb', 'background-color' : '#eee'});
},
'mouseleave' : function() {
td.setStyles({'border-color': '#eee', 'background-color' : '#fff'});
},
'click' : function() {
var year = this.date.getFullYear();
var month = this.date.getMonth() + 1;
var t = this.format(dayNumber);
var m = this.format(month, 'd');
this.id.set('value', t+'/'+m+'/'+year);
}.bind(this)
});
}
return td;
},
//ajoute une balise tr
addTr: function() {
return new Element('tr');
},
//Ajoute un lien vers le mois et précédent
setMonthLink : function(type) {
var link = new Element('span', {
href : 'javascript: void(0)',
html : (type == 'prev') ? '«' : '»',
title : (type == 'prev') ? this.titles[3] : this.titles[2],
styles : {
fontWeight : 'bold',
margin : '10px',
cursor : 'pointer'
}
});
link.addEvent('click' , function() {
this.date.setMonth((type == 'prev') ? (this.date.getMonth() - 1) : (this.date.getMonth() + 1));
$('current-month').set('html', this.months[this.date.getMonth()]);
this.table.dispose();
this.table = this.setTable();
this.build(this.date.getMonth(), this.date.getFullYear());
}.bind(this));
return link;
},
//Ajoute un lien vers l'année suivante et précédente
setYearLink : function(type) {
var link = new Element('span', {
href : 'javascript: void(0)',
html : (type == 'prev') ? '<' : '>',
title : (type == 'prev') ? this.titles[1] : this.titles[0],
styles : {
fontWeight : 'bold',
margin : '10px',
cursor : 'pointer'
}
});
link.addEvent('click' , function() {
this.date.setFullYear((type == 'prev') ? (this.date.getFullYear() - 1) : (this.date.getFullYear() + 1));
$('current-year').set('html', this.date.getFullYear());
this.table.dispose();
this.table = this.setTable();
this.build(this.date.getMonth(), this.date.getFullYear());
}.bind(this));
return link;
},
//formate les 1 en 01, 2 en 02 etc...
format : function(n) {
if( n == 0)
n = "01";
if(n < 10)
n = "0"+n;
return n ;
},
//Le mois en cours affichée dans l'entête du tableau
currentMonth : function(id) {
var span = new Element('span', {
html : this.months[this.date.getMonth()],
id : 'current-month',
styles : {
marginRight : '10px'
}
});
return span;
},
//L'année en cours affichée dans l'entête du tableau
currentYear : function(id) {
var span = new Element('span', {
html : id,
id : 'current-year'
});
return span;
},
//Construction du calendrier
build : function(idMonth, idYear) {
var thead = this.addTr();
var tdHead = this.addTdHead(7);
tdHead.adopt(
this.setYearLink('prev'),
this.setMonthLink('prev'),
this.currentMonth(idMonth),
this.currentYear(idYear),
this.setMonthLink('next'),
this.setYearLink('next')
).inject(thead);
var tdays = this.addTr().setStyles({background : 'buttonface'});
var year = this.date.getFullYear();
var time = new Date();
time.setDate(1);
time.setMonth(this.date.getMonth());
time.setFullYear(this.date.getFullYear());
var firstday = time.getDay();
if( firstday == 0 ) firstday = 7;
var year = this.date.getFullYear();
var month = this.date.getMonth();
var bisextil = this.dayNumber.indexOf(1);
bisextil = ( year % 4 == 0 ) ? 29 : 28;
var today = this.date.getDate();
this.days.each(function(d, i){
var t = this.addTd(d).setStyles({
border : 'none',
'-moz-border-radius' : '0px',
fontWeight : 'bold'
}).inject(tdays);
}, this);
this.table.adopt(thead, tdays).inject(this.box);
for (var i = 1; i < 43 ; i++) {
var n = 0;
if((i - 1) % 7 == 0) {
var tr = this.addTr().inject(this.table);
}
if(i < firstday ) {
tr.adopt(this.addTd('').setStyle('border', 'none'));
} else if (i > firstday && i < 8 ) {
var td = this.addTd(i + 1 - firstday).setStyles({
color : ( i == today) ? 'red' : 'black',
cursor : 'pointer'
});
td.inject(tr);
} else if( i < this.dayNumber[this.date.getMonth()] + firstday) {
var td = this.addTd(i + 1 - firstday);
td.setStyles({
color : ( i == today) ? 'red' : 'black',
cursor : 'pointer'
}).inject(tr);
}
}
},
//Affiche le calendar
show : function() {
this.box.fade('in');
this.status = true;
this.timer = this.hide.delay(5000, this);
},
//Cache le calendar
hide : function() {
this.status = false;
this.box.fade('out');
},
//Ecoute les events
listeningEvents : function() {
$('calendar').addEvent('click', function(){
this.show();
}.bind(this));
$('calendar-table').addEvents({
'mouseenter' : function() {
clearInterval(this.timer);
}.bind(this),
'mouseleave' : function() {
this.hide();
clearInterval(this.timer);
}.bind(this)
});
}
});
window.addEvent('domready', function(){
var cal = new Calendar('calendar');
cal.listeningEvents();
});
</script>
</head>
<body>
<form method="post" action="">
<input type="text" readonly='readonly' id="calendar" name="date" /> <!--value="choisir date" value= ?php echo date('d/m/20y',time()) ?>-->
<input type='submit' value='Validez'/><br /><em>Choisissez votre date de départ</em>
<div id="calendar-box"></div>
</form>
</body>
<!--<div id="DivCalendar" style="z-index:2; display:none; position:absolute;Top:1px; left:1px;" ></div>
<form id= "date" name="calendar" action="arcachon.php" onsubmit="return comparedate()" method="post" action="javascript:alert('ok')">
<input type='text' name='dd' id='dd' onfocus="show_calendar('dd','jj,mm,aaaa')" style='text-align:right' /> <em> Choisissez votre date </em><br />
</form>-->
</html>
Avec le même code tu devrais avoir le même pb,merci.
en fait pour le jour il y a une petite erreur en effet j'ai oublié d'ajouter les case vides au comptage
Pour ta validation de date c'est ok tu me fais travailler gratos t'es malin
méthodes à modifier dans Calendar :
[...]
//ajoute une balise td
addTd : function(dayNumber) {
var td = new Element('td', {
html : dayNumber,
styles : {
border : '1px solid #eee',
'-moz-border-radius' : '4px',
backgrounfColor : 'white',
'width' : '30px'
}
});
//effet de survol sur les numéros de jours et
//ajout de la date dans le champ id (en paramètre de la classe)
if(dayNumber >= 1 && dayNumber < 32) {
td.addEvents({
'mouseenter' : function() {
td.setStyles({'border-color': '#bbb', 'background-color' : '#eee'});
},
'mouseleave' : function() {
td.setStyles({'border-color': '#eee', 'background-color' : '#fff'});
},
'click' : function() {
alert(this.date.getDay());
var year = this.date.getFullYear();
var month = this.date.getMonth() + 1;
var t = this.format(dayNumber);
var m = this.format(month, 'd');
if(this.checkDate(dayNumber, month, year)) {
this.id.set('value', t+'/'+m+'/'+year);
}
}.bind(this)
});
}
return td;
},
// A ajouter
checkDate : function (day, month, year) {
if(year < this.date.getFullYear()) {
alert("Vous ajouter une date antérieur à aujourd'hui");
return false;
} else {
if(month < this.date.getMonth()){
alert("Vous ajouter une date antérieur à aujourd'hui");
return false;
} else {
if(day < this.date.getDate()) {
alert("Vous ajouter une date antérieur à aujourd'hui");
return false;
}
}
}
return true;
},
[...]
Pour le numéro du jour
[...]
for (var i = 1; i < 43 ; i++) {
var n = 0;
if((i - 1) % 7 == 0) {
var tr = this.addTr().inject(this.table);
}
if(i < firstday ) {
tr.adopt(this.addTd('').setStyle('border', 'none'));
} else if (i > firstday && i < 8 ) {
td = this.addTd(i + 1 - firstday).setStyles({
color : ( i === today - 1 + firstday) ? 'red' : 'black',
cursor : 'pointer'
});
td.inject(tr);
} else if( i < this.dayNumber[this.date.getMonth()] + firstday) {
td = this.addTd(i + 1 - firstday);
td.setStyles({
color : ( i === today - 1 + firstday ) ? 'red' : 'black',
cursor : 'pointer'
}).inject(tr);
}
}
[...]
franckysolo
ps : je vais bientôt re-coder ce calendar, je ferais la mis à jour sur le tuto je pense que je peux optimiser le code enfin quand j'aurais un peu plus de temps
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Keep It Simple Stupid - SF4 conf Swift - Cours 1/4 SF4 - Exceptions PDO - Formes Normales
Tutoriel complet MySQL !