Calendrier pour saisir la date dans un formulaire

Calendrier pour saisir la date dans un formulaire - HTML/CSS - Programmation

Marsh Posté le 22-09-2007 à 05:52:05    

Bonjour à tous  :)  
 
Je viens de passer plus de 3 heures à essayer de modifier les boucles de ce script mais cela n'a rien donné. :pfff:  
Je me tourne donc vers vous dans l'espoir que quelqu'un ai déjà eu le meme problème et qu'il puisse m'aider. :bounce:  
 
Mon problème est donc que je n'arrive pas à afficher les jours du lundi au dimanche, car ici le script fonctionne pour afficher les jours du dimanche au lundi.  :??:  
Voici la partie à modifier, il s'agit de la boucle des jours:
 

Code :
  1. var first_day = ds_dc_date.getDay();
  2. var first_loop = 1;
  3. // Start the first week
  4. ds_echo (ds_template_new_week());
  5. // If sunday is not the first day of the month, make a blank cell...
  6. if (first_day != 0) {
  7.  ds_echo (ds_template_blank_cell(first_day));
  8. }
  9. var j = first_day;
  10. for (i = 0; i < days; i ++) {
  11.  // Today is sunday, make a new week.
  12.  // If this sunday is the first day of the month,
  13.  // we've made a new row for you already.
  14.  if (j == 0 && !first_loop) {
  15.   // New week!!
  16.   ds_echo (ds_template_new_week());
  17.  }
  18.  // Make a row of that day!
  19.  ds_echo (ds_template_day(i + 1, m, y));
  20.  // This is not first loop anymore...
  21.  first_loop = 0;
  22.  // What is the next day?
  23.  j ++;
  24.  j %= 7;
  25. }


 
 
Je vous mets ici la totalité du code si cela peut aider certain.

Code :
  1. <script type="text/javascript">
  2. // <!-- <![CDATA[
  3. // Project: Dynamic Date Selector (DtTvB) - 2006-03-16
  4. // Script featured on JavaScript Kit- http://www.javascriptkit.com
  5. // Code begin...
  6. // Set the initial date.
  7. var ds_i_date = new Date();
  8. ds_c_month = ds_i_date.getMonth() + 1;
  9. ds_c_year = ds_i_date.getFullYear();
  10. // Get Element By Id
  11. function ds_getel(id) {
  12. return document.getElementById(id);
  13. }
  14. // Get the left and the top of the element.
  15. function ds_getleft(el) {
  16. var tmp = el.offsetLeft;
  17. el = el.offsetParent
  18. while(el) {
  19.  tmp += el.offsetLeft;
  20.  el = el.offsetParent;
  21. }
  22. return tmp;
  23. }
  24. function ds_gettop(el) {
  25. var tmp = el.offsetTop;
  26. el = el.offsetParent
  27. while(el) {
  28.  tmp += el.offsetTop;
  29.  el = el.offsetParent;
  30. }
  31. return tmp;
  32. }
  33. // Output Element
  34. var ds_oe = ds_getel('ds_calclass');
  35. // Container
  36. var ds_ce = ds_getel('ds_conclass');
  37. // Output Buffering
  38. var ds_ob = '';
  39. function ds_ob_clean() {
  40. ds_ob = '';
  41. }
  42. function ds_ob_flush() {
  43. ds_oe.innerHTML = ds_ob;
  44. ds_ob_clean();
  45. }
  46. function ds_echo(t) {
  47. ds_ob += t;
  48. }
  49. var ds_element; // Text Element...
  50. var ds_monthnames = [
  51. 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
  52. 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
  53. ]; // You can translate it for your language.
  54. var ds_daynames = [
  55. 'Dim', 'Lun', 'Mar', 'Me', 'Jeu', 'Ven', 'Sam'
  56. ]; // You can translate it for your language.
  57. // Calendar template
  58. function ds_template_main_above(t) {
  59. return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
  60.      + '<tr>'
  61.   + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();">&lt;&lt;</td>'
  62.   + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();">&lt;</td>'
  63.   + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Fermer]</td>'
  64.   + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">&gt;</td>'
  65.   + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">&gt;&gt;</td>'
  66.   + '</tr>'
  67.      + '<tr>'
  68.   + '<td colspan="7" class="ds_head">' + t + '</td>'
  69.   + '</tr>'
  70.   + '<tr>';
  71. }
  72. function ds_template_day_row(t) {
  73. return '<td class="ds_subhead">' + t + '</td>';
  74. // Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
  75. }
  76. function ds_template_new_week() {
  77. return '</tr><tr>';
  78. }
  79. function ds_template_blank_cell(colspan) {
  80. return '<td colspan="' + colspan + '"></td>'
  81. }
  82. function ds_template_day(d, m, y) {
  83. return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
  84. // Define width the day row.
  85. }
  86. function ds_template_main_below() {
  87. return '</tr>'
  88.      + '</table>';
  89. }
  90. // This one draws calendar...
  91. function ds_draw_calendar(m, y) {
  92. // First clean the output buffer.
  93. ds_ob_clean();
  94. // Here we go, do the header
  95. ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
  96. for (i = 0; i < 7; i ++) {
  97.  ds_echo (ds_template_day_row(ds_daynames[i]));
  98. }
  99. // Make a date object.
  100. var ds_dc_date = new Date();
  101. ds_dc_date.setMonth(m - 1);
  102. ds_dc_date.setFullYear(y);
  103. ds_dc_date.setDate(1);
  104. if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
  105.  days = 31;
  106. } else if (m == 4 || m == 6 || m == 9 || m == 11) {
  107.  days = 30;
  108. } else {
  109.  days = (y % 4 == 0) ? 29 : 28;
  110. }
  111. var first_day = ds_dc_date.getDay();
  112. var first_loop = 1;
  113. // Start the first week
  114. ds_echo (ds_template_new_week());
  115. // If sunday is not the first day of the month, make a blank cell...
  116. if (first_day != 0) {
  117.  ds_echo (ds_template_blank_cell(first_day));
  118. }
  119. var j = first_day;
  120. for (i = 0; i < days; i ++) {
  121.  // Today is sunday, make a new week.
  122.  // If this sunday is the first day of the month,
  123.  // we've made a new row for you already.
  124.  if (j == 0 && !first_loop) {
  125.   // New week!!
  126.   ds_echo (ds_template_new_week());
  127.  }
  128.  // Make a row of that day!
  129.  ds_echo (ds_template_day(i + 1, m, y));
  130.  // This is not first loop anymore...
  131.  first_loop = 0;
  132.  // What is the next day?
  133.  j ++;
  134.  j %= 7;
  135. }
  136. // Do the footer
  137. ds_echo (ds_template_main_below());
  138. // And let's display..
  139. ds_ob_flush();
  140. // Scroll it into view.
  141. ds_ce.scrollIntoView();
  142. }
  143. // A function to show the calendar.
  144. // When user click on the date, it will set the content of t.
  145. function ds_sh(t) {
  146. // Set the element to set...
  147. ds_element = t;
  148. // Make a new date, and set the current month and year.
  149. var ds_sh_date = new Date();
  150. ds_c_month = ds_sh_date.getMonth() + 1;
  151. ds_c_year = ds_sh_date.getFullYear();
  152. // Draw the calendar
  153. ds_draw_calendar(ds_c_month, ds_c_year);
  154. // To change the position properly, we must show it first.
  155. ds_ce.style.display = '';
  156. // Move the calendar container!
  157. the_left = ds_getleft(t);
  158. the_top = ds_gettop(t) + t.offsetHeight;
  159. ds_ce.style.left = the_left + 'px';
  160. ds_ce.style.top = the_top + 'px';
  161. // Scroll it into view.
  162. ds_ce.scrollIntoView();
  163. }
  164. // Hide the calendar.
  165. function ds_hi() {
  166. ds_ce.style.display = 'none';
  167. }
  168. // Moves to the next month...
  169. function ds_nm() {
  170. // Increase the current month.
  171. ds_c_month ++;
  172. // We have passed December, let's go to the next year.
  173. // Increase the current year, and set the current month to January.
  174. if (ds_c_month > 12) {
  175.  ds_c_month = 1;
  176.  ds_c_year++;
  177. }
  178. // Redraw the calendar.
  179. ds_draw_calendar(ds_c_month, ds_c_year);
  180. }
  181. // Moves to the previous month...
  182. function ds_pm() {
  183. ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
  184. // We have passed January, let's go back to the previous year.
  185. // Decrease the current year, and set the current month to December.
  186. if (ds_c_month < 1) {
  187.  ds_c_month = 12;
  188.  ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
  189. }
  190. // Redraw the calendar.
  191. ds_draw_calendar(ds_c_month, ds_c_year);
  192. }
  193. // Moves to the next year...
  194. function ds_ny() {
  195. // Increase the current year.
  196. ds_c_year++;
  197. // Redraw the calendar.
  198. ds_draw_calendar(ds_c_month, ds_c_year);
  199. }
  200. // Moves to the previous year...
  201. function ds_py() {
  202. // Decrease the current year.
  203. ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
  204. // Redraw the calendar.
  205. ds_draw_calendar(ds_c_month, ds_c_year);
  206. }
  207. // Format the date to output.
  208. function ds_format_date(d, m, y) {
  209. // 2 digits month.
  210. m2 = '00' + m;
  211. m2 = m2.substr(m2.length - 2);
  212. // 2 digits day.
  213. d2 = '00' + d;
  214. d2 = d2.substr(d2.length - 2);
  215. // YYYY-MM-DD
  216. // return y + '-' + m2 + '-' + d2;
  217. return d2 + '-' + m2 + '-' + y;
  218. }
  219. // When the user clicks the day.
  220. function ds_onclick(d, m, y) {
  221. // Hide the calendar.
  222. ds_hi();
  223. // Set the value of it, if we can.
  224. if (typeof(ds_element.value) != 'undefined') {
  225.  ds_element.value = ds_format_date(d, m, y);
  226. // Maybe we want to set the HTML in it.
  227. } else if (typeof(ds_element.innerHTML) != 'undefined') {
  228.  ds_element.innerHTML = ds_format_date(d, m, y);
  229. // I don't know how should we display it, just alert it to user.
  230. } else {
  231.  alert (ds_format_date(d, m, y));
  232. }
  233. }
  234. // And here is the end.
  235. // ]]> -->
  236. </script>


 
Merci d'avance à toutes celles et ceux qui auront pris le temps de lire mon message.
Source: http://www.javascriptkit.com

Reply

Marsh Posté le 22-09-2007 à 05:52:05   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed