Calendrier javascript Résolu

Question

Bonjour, 

Je ne maîtrise pas vraiment ce langage je me permets donc de vous solliciter pour m'aider.
J'ai un calendrier et je souhaite que lorsqu'une date est sélectionnée, en recliquant sur le calendrier le numéro du jour soit grisé ou en tout cas en évidence.
Je ne sais pas où est géré ce paramètre.
Merci

prosthetiks · Answer

Salut,

tu utilises quel script de calendrier ?

rivka95 · Answer

Merci beaucoup pour ta réponse. Je te colle tout le script, il est très long : // Project: Dynamic Date Selector (DtTvB) - 2006-03-16 // Script featured on JavaScript Kit- http://www.javascriptkit.com // Code begin... // Set the initial date. var ds_i_date = new Date(); ds_c_month = ds_i_date.getMonth() + 1; ds_c_year = ds_i_date.getFullYear(); // Get Element By Id function ds_getel(id) { return document.getElementById(id); } // Get the left and the top of the element. function ds_getleft(el) { var tmp = el.offsetLeft; el = el.offsetParent while(el) { tmp += el.offsetLeft; el = el.offsetParent; } return tmp; } function ds_gettop(el) { var tmp = el.offsetTop; el = el.offsetParent while(el) { tmp += el.offsetTop; el = el.offsetParent; } return tmp; } // Output Element var ds_oe = ds_getel('ds_calclass'); // Container var ds_ce = ds_getel('ds_conclass'); // Output Buffering var ds_ob = ''; function ds_ob_clean() { ds_ob = ''; } function ds_ob_flush() { ds_oe.innerHTML = ds_ob; ds_ob_clean(); } function ds_echo(t) { ds_ob += t; } var ds_element; // Text Element... var ds_monthnames = [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ]; // You can translate it for your language. var ds_daynames = [ 'Dim', 'Lun', 'Mar', 'Me', 'Jeu', 'Ven', 'Sam' ]; // You can translate it for your language. // Calendar template function ds_template_main_above(t) { return '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''; } function ds_template_day_row(t) { return ''; // Define width in CSS, XHTML 1.0 Strict doesn't have width property for it. } function ds_template_new_week() { return ''; } function ds_template_blank_cell(colspan) { return '' } function ds_template_day(d, m, y) { return ''; // Define width the day row. } function ds_template_main_below() { return '' + '

<<	<	[Fermer]	>	>>
' + t + '
' + t + '
	' + d + '

'; } // This one draws calendar... function ds_draw_calendar(m, y) { // First clean the output buffer. ds_ob_clean(); // Here we go, do the header ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y)); for (i = 0; i < 7; i ++) { ds_echo (ds_template_day_row(ds_daynames[i])); } // Make a date object. var ds_dc_date = new Date(); ds_dc_date.setMonth(m - 1); ds_dc_date.setFullYear(y); ds_dc_date.setDate(1); if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) { days = 31; } else if (m == 4 || m == 6 || m == 9 || m == 11) { days = 30; } else { days = (y % 4 == 0) ? 29 : 28; } var first_day = ds_dc_date.getDay(); var first_loop = 1; // Start the first week ds_echo (ds_template_new_week()); // If sunday is not the first day of the month, make a blank cell... if (first_day != 0) { ds_echo (ds_template_blank_cell(first_day)); } var j = first_day; for (i = 0; i < days; i ++) { // Today is sunday, make a new week. // If this sunday is the first day of the month, // we've made a new row for you already. if (j == 0 && !first_loop) { // New week!! ds_echo (ds_template_new_week()); } // Make a row of that day! ds_echo (ds_template_day(i + 1, m, y)); // This is not first loop anymore... first_loop = 0; // What is the next day? j ++; j %= 7; } // Do the footer ds_echo (ds_template_main_below()); // And let's display.. ds_ob_flush(); // Scroll it into view. ds_ce.scrollIntoView(); } // A function to show the calendar. // When user click on the date, it will set the content of t. function ds_sh(t) { // Set the element to set... ds_element = t; //alert(t.value); var madate0=t.value; if (madate0 != "") { var madate1 = madate0.replace(/-/g,"/"); var madate2 = madate1.split('/'); var madate = madate2[2]+"/"+madate2[1]+"/"+madate2[0]; //alert(madate); } else { madate = new Date; //alert(madate); } // Make a new date, and set the current month and year. var ds_sh_date = new Date(madate); ds_c_month = ds_sh_date.getMonth() + 1; ds_c_year = ds_sh_date.getFullYear(); // Draw the calendar ds_draw_calendar(ds_c_month, ds_c_year); // To change the position properly, we must show it first. ds_ce.style.display = ''; // Move the calendar container! the_left = ds_getleft(t); the_top = ds_gettop(t) + t.offsetHeight; ds_ce.style.left = the_left + 'px'; ds_ce.style.top = the_top + 'px'; // Scroll it into view. //ds_ce.scrollIntoView(); } // Hide the calendar. function ds_hi() { ds_ce.style.display = 'none'; } // Moves to the next month... function ds_nm() { // Increase the current month. ds_c_month ++; // We have passed December, let's go to the next year. // Increase the current year, and set the current month to January. if (ds_c_month > 12) { ds_c_month = 1; ds_c_year++; } // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Moves to the previous month... function ds_pm() { ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid. // We have passed January, let's go back to the previous year. // Decrease the current year, and set the current month to December. if (ds_c_month < 1) { ds_c_month = 12; ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid. } // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Moves to the next year... function ds_ny() { // Increase the current year. ds_c_year++; // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Moves to the previous year... function ds_py() { // Decrease the current year. ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid. // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Format the date to output. function ds_format_date(d, m, y) { // 2 digits month. m2 = '00' + m; m2 = m2.substr(m2.length - 2); // 2 digits day. d2 = '00' + d; d2 = d2.substr(d2.length - 2); // YYYY-MM-DD // return y + '-' + m2 + '-' + d2; return d2 + '-' + m2 + '-' + y; } // When the user clicks the day. function ds_onclick(d, m, y) { // Hide the calendar. ds_hi(); // Set the value of it, if we can. if (typeof(ds_element.value) != 'undefined') { ds_element.value = ds_format_date(d, m, y); // Maybe we want to set the HTML in it. } else if (typeof(ds_element.innerHTML) != 'undefined') { ds_element.innerHTML = ds_format_date(d, m, y); // I don't know how should we display it, just alert it to user. } else { alert (ds_format_date(d, m, y)); } } function Affiche() { var numero = document.getElementById('numero'); var copie = document.getElementById('num_affaire'); copie.value = numero.value.substr(0, 4); }

prosthetiks · Answer

Si je peux me permettre, je te conseille d'utiliser le jQuery DatePicker, qui est très bien documenté.

https://jqueryui.com/datepicker/

Si tu veux persister à utiliser celui-là, je tâcherai de me jeter dans le code et de t'aider ;)

rivka95 · Answer

Je vais me pencher sur jQuery (je ne connais pas), mais j'aimerais si ça ne t'embête pas, trouver une solution avec javascript au moins pour que je sache.
Donc si tu trouves comment faire...

Merci à toi !

rivka95 · Answer

En effet ça semble plus intéressant, je vais me pencher là dessus et de ton côté je veux volontiers que tu regardes mon code, merci encore !

prosthetiks · Answer

Voila le script modifié. Tu peux changer la couleur de fond à la ligne 8, c'est la variable selectedBgColor. EDIT: Il faut rajouter un ID dans ta balise input: Please input a date:
Il sert à gérer les multi-calendriers. EDIT2: Modifications mises en gras/souligné, si tu veux pouvoir les localiser et les comprendre. // Project: Dynamic Date Selector (DtTvB) - 2006-03-16 // Script featured on JavaScript Kit- http://www.javascriptkit.com // Code begin... // Set the initial date. var ds_i_date = new Date(); var daySelected = new Object(); var currentCalendar = null; var selectedBgColor = 'red'; ds_c_month = ds_i_date.getMonth() + 1; ds_c_year = ds_i_date.getFullYear(); // Get Element By Id function ds_getel(id) { return document.getElementById(id); } // Get the left and the top of the element. function ds_getleft(el) { var tmp = el.offsetLeft; el = el.offsetParent while(el) { tmp += el.offsetLeft; el = el.offsetParent; } return tmp; } function ds_gettop(el) { var tmp = el.offsetTop; el = el.offsetParent while(el) { tmp += el.offsetTop; el = el.offsetParent; } return tmp; } // Output Element var ds_oe = ds_getel('ds_calclass'); // Container var ds_ce = ds_getel('ds_conclass'); // Output Buffering var ds_ob = ''; function ds_ob_clean() { ds_ob = ''; } function ds_ob_flush() { ds_oe.innerHTML = ds_ob; ds_ob_clean(); } function ds_echo(t) { ds_ob += t; } var ds_element; // Text Element... var ds_monthnames = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; // You can translate it for your language. var ds_daynames = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]; // You can translate it for your language. // Calendar template function ds_template_main_above(t) { return '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + ''; } function ds_template_day_row(t) { return ''; // Define width in CSS, XHTML 1.0 Strict doesn't have width property for it. } function ds_template_new_week() { return ''; } function ds_template_blank_cell(colspan) { return '' } function ds_template_day(d, m, y) { if(daySelected.hasOwnProperty(currentCalendar)){ var cs = daySelected[currentCalendar]; if(m == cs.m && d == cs.d && y == cs.y){ return ''; } } return ''; // Define width the day row. } function ds_template_main_below() { return '' + '

<<	<	[Close]	>	>>
' + t + '
' + t + '
	' + d + '	' + d + '

'; } // This one draws calendar... function ds_draw_calendar(m, y) { // First clean the output buffer. ds_ob_clean(); // Here we go, do the header ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y)); for (i = 0; i < 7; i ++) { ds_echo (ds_template_day_row(ds_daynames[i])); } // Make a date object. var ds_dc_date = new Date(); ds_dc_date.setMonth(m - 1); ds_dc_date.setFullYear(y); ds_dc_date.setDate(1); if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) { days = 31; } else if (m == 4 || m == 6 || m == 9 || m == 11) { days = 30; } else { days = (y % 4 == 0) ? 29 : 28; } var first_day = ds_dc_date.getDay(); var first_loop = 1; // Start the first week ds_echo (ds_template_new_week()); // If sunday is not the first day of the month, make a blank cell... if (first_day != 0) { ds_echo (ds_template_blank_cell(first_day)); } var j = first_day; for (i = 0; i < days; i ++) { // Today is sunday, make a new week. // If this sunday is the first day of the month, // we've made a new row for you already. if (j == 0 && !first_loop) { // New week!! ds_echo (ds_template_new_week()); } // Make a row of that day! ds_echo (ds_template_day(i + 1, m, y)); // This is not first loop anymore... first_loop = 0; // What is the next day? j ++; j %= 7; } // Do the footer ds_echo (ds_template_main_below()); // And let's display.. ds_ob_flush(); // Scroll it into view. ds_ce.scrollIntoView(); } // A function to show the calendar. // When user click on the date, it will set the content of t. function ds_sh(t) { currentCalendar = t.getAttribute('id'); // Set the element to set... ds_element = t; // Make a new date, and set the current month and year. var ds_sh_date = new Date(); ds_c_month = ds_sh_date.getMonth() + 1; ds_c_year = ds_sh_date.getFullYear(); // Draw the calendar ds_draw_calendar(ds_c_month, ds_c_year); // To change the position properly, we must show it first. ds_ce.style.display = ''; // Move the calendar container! the_left = ds_getleft(t); the_top = ds_gettop(t) + t.offsetHeight; ds_ce.style.left = the_left + 'px'; ds_ce.style.top = the_top + 'px'; // Scroll it into view. ds_ce.scrollIntoView(); } // Hide the calendar. function ds_hi() { ds_ce.style.display = 'none'; } // Moves to the next month... function ds_nm() { // Increase the current month. ds_c_month ++; // We have passed December, let's go to the next year. // Increase the current year, and set the current month to January. if (ds_c_month > 12) { ds_c_month = 1; ds_c_year++; } // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Moves to the previous month... function ds_pm() { ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid. // We have passed January, let's go back to the previous year. // Decrease the current year, and set the current month to December. if (ds_c_month < 1) { ds_c_month = 12; ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid. } // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Moves to the next year... function ds_ny() { // Increase the current year. ds_c_year++; // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Moves to the previous year... function ds_py() { // Decrease the current year. ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid. // Redraw the calendar. ds_draw_calendar(ds_c_month, ds_c_year); } // Format the date to output. function ds_format_date(d, m, y) { // 2 digits month. m2 = '00' + m; m2 = m2.substr(m2.length - 2); // 2 digits day. d2 = '00' + d; d2 = d2.substr(d2.length - 2); // YYYY-MM-DD return y + '-' + m2 + '-' + d2; } // When the user clicks the day. function ds_onclick(d, m, y, cell) { // Hide the calendar. daySelected[currentCalendar] = {d: d, m: m, y:y}; ds_hi(); // Set the value of it, if we can. if (typeof(ds_element.value) != 'undefined') { ds_element.value = ds_format_date(d, m, y); // Maybe we want to set the HTML in it. } else if (typeof(ds_element.innerHTML) != 'undefined') { //ds_element.style.css('backgroundColor', 'red'); ds_element.innerHTML = ds_format_date(d, m, y); // I don't know how should we display it, just alert it to user. } else { alert (ds_format_date(d, m, y)); } }

rivka95 · Answer

Merci beaucoup pour ta réponse.
J'ai mis les codes en gras aux bons endroits dans mon code mais ça ne me donne rien.
Peut-être ai-je mal fait, sais pas.
Tu as une idée ?

prosthetiks · Answer

Tu as rajouté un ID a ton input ?

prosthetiks · Answer

Je te colle ici l'intégralité de la structure (HTML + CSS + JS). Ce code est fonctionnel. regarde ce qui diffère entre celui-ci et le tiens.

rivka95 · Answer

Oui j'ai bien rajouté un id à l'input.
Faut-il faire référence à l'id dans le javascript ?
J'ai juste rajouté à mon code le code en gras dans ta réponse.
Que faut-il faire d'autre ?

prosthetiks · Answer

remplace l'intégralité de ton code javascript par le miens, ça devrait fonctionner.

Celui de mon dernier copier/coller est étoffé, il réouvre le calendrier au mois sélectionné. Je te conseille de prendre celui-là.

rivka95 · Answer

Ok je teste ça tout de suite et te dis ce que ça donne !

rivka95 · Answer

J'ai copié collé ton javascript et en effet ça fonctionne parfaitement.
J'ai quand même comparé avec le mien pour juste remplacer ou rajouter les bouts de code nécessaires et là ça ne fonctionne pas.
Je ne comprends pas bien.
En tout cas ton code fait exactement ce que je veux.
Je vais encore vérifier, un truc a du m'échapper c'est pas possible autrement.
Maintenant y'a plus qu'à comprendre comment tout cela fonctionne.
En tout cas MILLE MERCIS A TOI pour ton EFFICACITE...

rivka95 · Answer

Coucou !

Je vous expose mon problème (peut être que prosthetiks pourra m'aider, il m'a été d'une grande aide pour mon problème énoncé plus haut) :
J'ai un calendrier qui quand on clique sur une date affiche la date dans un champ de type input (logique). Lorsque l'on retourne dans le calendrier la date est bien enregistrée et est colorée.
Il est également possible de noter la date « manuellement » et lorsque que l'on retourne dans le calendrier la date est bien enregistrée mais la couleur sur le jour n'apparaît pas.
Une solution ???
Merci beaucoup !

Calendrier javascript

14 réponses

Discussions similaires

Newsletters