Commits

Matthew Schinckel  committed e8bef02

Working datepicker

  • Participants
  • Parent commits 1a1ff04

Comments (0)

Files changed (1)

  *  
  */
  
-function datepicker(dp, field) {
-  function draw(){
-    // See if there is an element with the id datepicker already.
-    if ($('#datepicker')[0]) return;
-    
-    /* Draw the outline of the datepicker:
-    
-    %div.datepicker
-      %header
-        %div.prev
-        %div.month April
-        %div.year 2010
-        %div.next
-      %content
-        %table
-          %thead
-            %tr
-              - %W{Sunday Monday Tuesday Wednesday Thursday Friday Saturday}.each do |day|
-                %th{:class=>"#{day[0..0] == 'S' ? 'weekend' : 'weekday'}"}
-                  %span{:title => "#{day}"} #{day[0..1]}
-          %tbody
-            - i = -3
-            - 5.times do |j|
-              %tr
-                - 7.times do |k|
-                  %td{:class=>"#{'other-month' if i < 1 or i > 30} #{'weekend' if k == 0 or k == 6} #{'today' if i == 25}", :date=>"#{'2010-04-' + (i > 0 and i < 10 ? "0" + i.to_s : i.to_s) if i > 0 and i < 31}"} #{i if i > 0 and i < 31}
-                  - i += 1
-      %footer
-        %a.today Select Today
-    
-    */
-    
-    data = "<div id='datepicker' class='datepicker'>" +
-        "<header>" +
-            "<div class='prev' />" +
-            "<div class='month' />" +
-            "<div class='year' />" +
-            "<div class='next' />" +
-        "</header>" +
-        "<content><table><thead><tr>" +
-            "<th class='weekend'> Su </th>" +
-            "<th class='weekday'> Mo </th>" +
-            "<th class='weekday'> Tu </th>" +
-            "<th class='weekday'> We </th>" +
-            "<th class='weekday'> Th </th>" +
-            "<th class='weekday'> Fr </th>" +
-            "<th class='weekend'> Sa </th>" +
-        "</tr></thead><tbody /><footer><a class='today'></footer>";
-    $(data);
+function datepicker(field) {
+  months = ["January","February","March","April","May","June",
+    "July","August","September","October","November","December"];
+  data = "<div id='datepicker' class='datepicker'>" +
+            "<header>" +
+                "<div class='prev' />" +
+                "<div class='month' /> " +
+                "<div class='year' />" +
+                "<div class='next' />" +
+            "</header>" +
+            "<content><table><thead><tr>" +
+                "<th class='weekend'> Su </th>" +
+                "<th class='weekday'> Mo </th>" +
+                "<th class='weekday'> Tu </th>" +
+                "<th class='weekday'> We </th>" +
+                "<th class='weekday'> Th </th>" +
+                "<th class='weekday'> Fr </th>" +
+                "<th class='weekend'> Sa </th>" +
+            "</tr></thead><tbody /></table></content>" +
+            "<footer><a class='today'>Select Today</a></footer>";
+            
+  // TODO: handle having two datepicker objects on screen at the same time.
+  $("body").append($(data));
+  var dp = $('#datepicker');
+  dp.attr('date', field.val());
+  
+  function parseDate(isoDate){
+    var d = new Date();
+    var date = isoDate.split('-');
+    d.setFullYear(date[0]);
+    d.setMonth(date[1]);
+    d.setDate(date[2]);
+    return d;
   }
   
   function redraw(){
     // Redraw the datepicker, with the month that needs to be drawn.
-    var date = dp.attr('date');
+    var d = new Date();
+    if (dp.attr('date')) {
+      d = parseDate(dp.attr('date'));
+    } else {
+      dp.attr('date', d.toISOString().split('T')[0]);
+    }
+
+    d.setDate(1);
+    var last = new Date();
+    last.setTime(d.getTime());
+    last.setMonth(last.getMonth() + 1);
+    last = new Date(last - (1000*60*60*24));
     // Go to the first Sunday on or before the start of the month.
-    
+    while (d.getDay() != 0) {
+      d = new Date(d.getTime() - (1000*60*60*24));
+    }
+    var data = "";
+    while (d <= last) {
+      data += "<tr>";
+      for (i=0;i<7;i++){
+        var day = new Date(d.getTime() + (1000*60*60*24*i));
+        data += "<td class='week";
+        if (day.getDay() == 0 || day.getDay() == 6) {
+          data += "end";
+        } else {
+          data += "day";
+        }
+        data += "' date='" + day.getFullYear() + '-';
+        if (day.getMonth() < 9) {
+          data += "0";
+        }
+        data += (day.getMonth() + 1);
+        data += '-';
+        if (day.getDate() < 10) {
+          data += "0";
+        }
+        data += day.getDate() + "'";
+        data += ">";
+        if (day.getMonth() == last.getMonth()){
+          data += day.getDate();
+        }
+        data += "</td>";
+      }
+      data += "</tr>";
+      d = new Date(d.getTime() + (1000*60*60*24*7));
+    }
+    dp.find('.month').html(months[last.getMonth()]);
+    dp.find('.year').html(last.getFullYear());
+    dp.find('tbody').html(data);
   }
 
   function nextMonth(e) {
     // Go to the next month.
-    var date = dp.attr('date');
-    // date = date + one_month();
+    var date = parseDate(dp.attr('date'));
+    date.setMonth(date.getMonth()-1);
+    dp.attr('date', date.toISOString().split('T')[0]);
     redraw();
     e.stopPropagation();
   };
   function prevMonth(e) {
     // Go to the previous month.
-    var date = dp.attr('date');
-    // date = date - one_month();
+    var date = parseDate(dp.attr('date'));
+    date.setMonth(date.getMonth()+1);
+    dp.attr('date', date.toISOString().split('T')[0]);
     redraw();
     e.stopPropagation();
   };
     dp.undelegate('td', 'click');
     $("body").unbind('click');
     // Hide the datepicker. Or destroy it?
-    dp.hide();
+    dp.detach();
   };
   
   // The setup.
   // Show the datepicker over the input element it represents.
   dp.show().css(field.position());
+  redraw();
   // Make all clicks on cells select their date.
   dp.delegate('td', 'click', selectDate);
   // Make the next/prev month buttons work.
 $(function(){
   $('input[type="date"], input[type="week"]').click(
     function(e){
-      datepicker($('.datepicker'), $(this));
+      datepicker($(this));
       e.stopPropagation();
     });
 });