bring back the jquerytools calendar

2 files changed, 50 insertions, 16 deletions

diff --git a/index.html b/index.html
index 3d4a302..7e0ac97 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
         <script type="text/javascript" src="http://javascriptrrd.cvs.sourceforge.net/viewvc/*checkout*/javascriptrrd/v0/src/lib/binaryXHR.js?revision=1.5&content-type=text%2Fplain"></script>
         <script type="text/javascript" src="http://javascriptrrd.cvs.sourceforge.net/viewvc/*checkout*/javascriptrrd/v0/src/lib/rrdFile.js?revision=1.8&content-type=text%2Fplain"></script>
 
-        <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.2/all/jquery.tools.min.js"></script>
+        <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.3/all/jquery.tools.min.js"></script>
 
         <script type="text/javascript" src="jarmon.js"></script>
         <script type="text/javascript" src="docs/jarmon_example_recipes.js"></script>
@@ -110,16 +110,28 @@
         }
 
         $(function() {
-    // Add dhtml calendars to the date input fields
-    /*
-    $(":date").dateinput({format: 'mmm dd yyyy', max: +1});
-    $(":date[name=startTime]").data("dateinput").change(function() {
-        $(":date[name=endTime]").data("dateinput").setMin(this.getValue(), true);
-    });
-    $(":date[name=endTime]").data("dateinput").change(function() {
-        $(":date[name=startTime]").data("dateinput").setMax(this.getValue(), true);
-    });
-    */
+
+            // Add dhtml calendars to the date input fields
+            $(".timerange_control.custom input")
+                .dateinput({
+                    'format': 'dd mmm yyyy 00:00:00',
+                    'max': +1,
+                    'css': {'input': 'jquerytools_date'}})
+                .bind('onBeforeShow', function(e) {
+                    $(this).data('dateinput').setValue(new Date(this.value));
+                });
+            $(".timerange_control.custom input").bind('onHide',
+                function(e) {
+                    $(this).trigger('change');
+                });
+
+            $(":date[name=from_custom]").data("dateinput").change(function() {
+                $(":date[name=to_custom]").data("dateinput").setMin(this.getValue(), true);
+            });
+            $(":date[name=to_custom]").data("dateinput").change(function() {
+                $(":date[name=from_custom]").data("dateinput").setMax(this.getValue(), true);
+            });
+
             // Setup dhtml tabs
             $(".css-tabs").tabs(".css-panes > div", {history: true});
 
@@ -141,8 +153,8 @@
             <form>
                 <div>
                     <span class="timerange_control custom">
-                        <input name="from_custom" type="date"  />
-                        <input name="to_custom" type="date"  />
+                        <input name="from_custom" type="text"  />
+                        <input name="to_custom" type="text"  />
                     </span>
                     <span class="timerange_control standard">
                         <select name="from_standard">
diff --git a/jarmon.js b/jarmon.js
index d5a6f28..c9fbdde 100644
--- a/jarmon.js
+++ b/jarmon.js
@@ -108,6 +108,7 @@ jarmon.localTimeFormatter = function (v, axis) {
     return $.plot.formatDate(d, fmt, axis.options.monthNames);
 };
 
+
 /**
  * A wrapper around an instance of javascriptrrd.RRDFile which provides a
  * convenient way to query the RRDFile based on time range, RRD data source (DS)
@@ -654,6 +655,24 @@ jarmon.ChartCoordinator = function(ui) {
         }
     });
 
+    // Update the time ranges and redraw charts when the custom datetime inputs
+    // are changed
+    this.ui.find('[name="from_custom"]').bind('change',
+        function(e) {
+            self.ui.find('[name="from_standard"]').val('custom');
+            var tzoffset = parseInt(self.ui.find('[name="tzoffset"]').val());
+            self.setTimeRange(new Date(this.value + ' UTC').getTime() - tzoffset, null);
+            self.update();
+        }
+    );
+    this.ui.find('[name="to_custom"]').bind('change',
+        function(e) {
+            self.ui.find('[name="from_standard"]').val('custom');
+            var tzoffset = parseInt(self.ui.find('[name="tzoffset"]').val());
+            self.setTimeRange(null, new Date(this.value + ' UTC').getTime() - tzoffset);
+            self.update();
+        }
+    );
     // Populate a list of tzoffset options
     var label, val;
     options = this.ui.find('select[name="tzoffset"]');
@@ -791,9 +810,12 @@ jarmon.ChartCoordinator.prototype.setTimeRange = function(from, to) {
      * @param startTime: The start time I{Date}
      * @param endTime: The end time I{Date}
      **/
-
-    this.ui.find('[name="from"]').val(from);
-    this.ui.find('[name="to"]').val(to);
+    if(from != null) {
+        this.ui.find('[name="from"]').val(from);
+    }
+    if(to != null) {
+        this.ui.find('[name="to"]').val(to);
+    }
 };
 
 jarmon.ChartCoordinator.prototype.init = function() {