dhis2-devs team mailing list archive

[noreply@xxxxxxxxxxxxx]

------------------------------------------------------------
revno: 15109
committer: Morten Olav Hansen <mortenoh@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2014-04-29 20:13:33 +0545
message:
  support for ranged pickers in dhis2.period.DatePicker
modified:
  dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.period.js


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription

=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.period.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.period.js	2014-04-29 13:52:07 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.period.js	2014-04-29 14:28:33 +0000
@@ -34,24 +34,68 @@
 
 dhis2.period.DEFAULT_DATE_FORMAT = "yyyy-mm-dd";
 
+/**
+ * A date picker class that allows for creating both simple date pickers, and ranged date pickers.
+ *
+ * There is probably no reason to use this directly, since on startup, a global variable have been made available:
+ *  - dhis2.period.picker   DatePicker object created with system calendar and system date format
+ *
+ * @param calendar Calendar to use, this must come from $.calendars.instance(chronology).
+ * @param format Date format to use for formatting, will default to ISO 8601
+ * @constructor
+ * @see <a href="http://keith-wood.name/datepick.html";>http://keith-wood.name/datepick.html</a>
+ */
 dhis2.period.DatePicker = function( calendar, format ) {
   this.calendar = calendar;
   this.format = format;
-};
-
-dhis2.period.DatePicker.prototype.createInstance = function( el, options ) {
-  var $el = $(el);
-
-  var defaults = {
+
+  this.defaults = {
     calendar: this.calendar,
     dateFormat: this.format,
     showAnim: '',
     maxDate: this.calendar.today(),
     yearRange: 'c-100:c+100'
   };
-
-  $.extend(defaults, options);
-  $el.calendarsPicker(defaults);
+};
+
+/**
+ * Creates a date picker.
+ *
+ * @param el Element to select on, can be any kind of jQuery selector, or a jqEl
+ * @param options Additional options, will be merged with the defaults
+ */
+dhis2.period.DatePicker.prototype.createInstance = function( el, options ) {
+  var mergedOptions = $.extend({}, this.defaults, options);
+  $(el).calendarsPicker(mergedOptions);
+};
+
+/**
+ * Creates a ranged date picker, keeping to fields in sync.
+ *
+ * @param fromEl From element to select on, can be any kind of jQuery selector, or a jqEl
+ * @param toEl To element to select on, can be any kind of jQuery selector, or a jqEl
+ * @param options Additional options, will be merged with the defaults
+ */
+dhis2.period.DatePicker.prototype.createRangedInstance = function( fromEl, toEl, options ) {
+  var mergedOptions = $.extend({}, this.defaults, options);
+
+  var $fromEl = $(fromEl);
+  var $toEl = $(toEl);
+
+  console.log($fromEl, $toEl);
+
+  mergedOptions.onSelect = function( dates ) {
+    $fromEl.calendarsPicker("option", "maxDate", dates[0] || null);
+    $toEl.calendarsPicker("option", "minDate", dates[0] || null);
+  };
+
+  $fromEl.calendarsPicker(mergedOptions);
+
+  var toOptions = $.extend({}, mergedOptions, {
+    maxDate: null
+  });
+
+  $toEl.calendarsPicker(toOptions);
 };
 
 /**