Changes to range datepicker.

frontend/app/ui_components/date/date-picker-directive.js

@@ -26,9 +26,8 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-module.exports = function(TimezoneService, ConfigurationService, $timeout) {
-  var datePattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[012])\/\d{4}$/i,
-      parseDate = TimezoneService.parseDate,
+module.exports = function(TimezoneService, ConfigurationService, I18n, $timeout) {
+  var parseDate = TimezoneService.parseDate,
       formattedDate = function(date) {
         return TimezoneService.parseDate(date).format('L');
       },
@@ -38,13 +37,12 @@ module.exports = function(TimezoneService, ConfigurationService, $timeout) {
     restrict: 'EA',
     replace: true,
     scope: { 
-      startDate: '=', 
-      endDate: '=' 
+      date: '=',
+      noDateText: '='
     },
-    template: '<div class="daterange"><input ng-model="daterange" ng-change="change(this)" /><div></div></div>',
+    templateUrl: '/templates/components/inplace_editor/date/date_picker.html',
     link: function(scope, element) {
-      var previous,
-          current,
+      var selectedDate,
           timerId,
           div = element.find('div'),
           input = element.find('input'),
@@ -52,24 +50,25 @@ module.exports = function(TimezoneService, ConfigurationService, $timeout) {
             if(date) {
               div.datepicker('setDate', parseDate(date).toDate());
               div.find('.ui-datepicker-current-day').click();
+            } else {
+              div.datepicker('setDate', null);
+              scope.editableDate = scope.noDateText;
+              scope.date = null;
             }
           },
-          clearDate = function(inst) {
-            previous = current = null;
-            var onSelect = jQuery.datepicker._get(inst, "onSelect");
-            if (onSelect) {
-              onSelect.apply(input, inst);  // trigger custom callback
-            }
-          },
-          addClearButton = function (inp, inst) {
+          addClearButton = function (inp) {
             setTimeout(function() {
+              if(div.find('.ui-datepicker-clear').length > 0) {
+                return;
+              }
+
               var buttonPane = jQuery(inp)
                   .find(".ui-datepicker-buttonpane");
 
               jQuery( "<button>", {
                   text: "Clear",
                   click: function() {
-                    clearDate(inst);
+                    setDate(null);
                   }
               })
               .appendTo(buttonPane)
@@ -79,85 +78,44 @@ module.exports = function(TimezoneService, ConfigurationService, $timeout) {
 
       scope.change = function(scope) {
         $timeout.cancel(timerId);
-        timerId = $timeout(function() {
-          var range = scope.daterange.split(/\s+?-\s+?/i),
-              isMatching = range.every(function(date) {
-                return TimezoneService.isValid(date);
-              });
+          timerId = $timeout(function() {
+          var isMatching = TimezoneService.isValid(scope.date);;
 
           if(isMatching) {
-            range.forEach(function(date) {
-              setDate(date);
-            });
+            setDate(scope.date);
           }
         }, 500);
       };
 
+      scope.click = function(scope) {
+        div.toggle();
+      };
+
       div.datepicker({
-        minDate: null,
-        maxDate: null,
         firstDay: ConfigurationService.startOfWeek(),
         showWeeks: true,
+        showButtonPanel: true,
+        beforeShow: function(inp) {
+          addClearButton(inp);
+        },
+        onChangeMonthYear: function(year, month, inst) {
+          addClearButton(inst.input);
+        },
         onSelect: function(dateText, inst) {
-          if(!inst) {
-            input.val('No start date set - No end date set');
-            $timeout(function() {
-              scope.startDate = scope.endDate = null;
-            });
-          } else {
-            previous = current;
-            current = parseDate(new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
-            if(!previous || previous.isSame(current)) {
-              previous = current;
-              $timeout(function() {
-                scope.startDate = formattedISODate(previous);
-                scope.endDate = null;
-              });
-
-              input.val(formattedDate(previous));
-            } else {
-              var start = minDate(current, previous),
-                  end = maxDate(current, previous);
-
-              $timeout(function(){
-                scope.startDate = formattedISODate(start);
-                scope.endDate = formattedISODate(end);
+          selectedDate = parseDate(new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
+          $timeout(function() {
+            scope.date = formattedISODate(selectedDate);
+          });
 
-                input.val(formattedDate(start) + ' - ' + formattedDate(end));
-              });
-            }
-          }
-        },
-        beforeShowDay: function(selectedDay) {
-          var isSelected = parseDate(selectedDay) >= minDate(current, previous) && 
-                           parseDate(selectedDay) <= maxDate(current, previous);
-          return [true, isSelected ? 'date-range-selected' : ''];
+          scope.editableDate = formattedDate(selectedDate);
         }
       });
-
-      setDate(scope.startDate);
-      setDate(scope.endDate);
+      setDate(scope.date);
+      div.toggle();
     }
   };
-
-  function minDate(firstDate, secondDate) {
-    if(secondDate && firstDate && firstDate.isAfter(secondDate)) {
-      return secondDate;
-    }
-
-    return firstDate;
-  }
-
-  function maxDate(firstDate, secondDate) {
-    if(secondDate && firstDate && !firstDate.isAfter(secondDate)) {
-      return secondDate;
-    }
-
-    return firstDate;
-  }
 };
 
-
 (function ($) {
   $.extend($.datepicker, {
 
@@ -167,8 +125,8 @@ module.exports = function(TimezoneService, ConfigurationService, $timeout) {
     // Override the _inlineDatepicker method
     _inlineDatepicker: function (target, inst) {
 
-    // Call the original
-    this._inlineDatepicker2(target, inst);
+      // Call the original
+      this._inlineDatepicker2(target, inst);
 
       var beforeShow = $.datepicker._get(inst, 'beforeShow');
 

frontend/app/ui_components/date/date-range-picker-directive.js

@@ -0,0 +1,62 @@
+//-- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+//++
+
+module.exports = function(TimezoneService, ConfigurationService, I18n, $timeout) {
+  return {
+    restrict: 'EA',
+    replace: true,
+    scope: { 
+      startDate: '=', 
+      endDate: '='
+    },
+    templateUrl: '/templates/components/inplace_editor/date/date_range_picker.html',
+    link: function(scope, element) {
+      scope.noStartDate = I18n.t('js.label_no_start_date');
+      scope.noEndDate = I18n.t('js.label_no_due_date');
+
+      element.find("input.start").datepicker({
+        firstDay: ConfigurationService.startOfWeek(),
+        showWeeks: true,
+        changeMonth: true,
+        numberOfMonths: 2,
+        onClose: function( selectedDate ) {
+          element.find("input.end").datepicker("option", "minDate", selectedDate);
+        }
+      });
+      element.find("input.end").datepicker({
+        firstDay: ConfigurationService.startOfWeek(),
+        showWeeks: true,
+        changeMonth: true,
+        numberOfMonths: 2,
+        onClose: function( selectedDate ) {
+          element.find("input.start").datepicker("option", "maxDate", selectedDate);
+        }
+      });
+    }
+  };
+};

frontend/app/ui_components/index.js

@@ -46,7 +46,8 @@ angular.module('openproject.uiComponents')
   .directive('opTime', ['TimezoneService', require('./date/time-directive')])
   .directive('opDateTime', ['$compile', 'TimezoneService', require('./date/date-time-directive')])
   .directive('emptyElement', [require('./empty-element-directive')])
-  .directive('opDateRange', ['TimezoneService', 'ConfigurationService', '$timeout', require('./date/date-range-directive')])
+  .directive('opDateRangePicker', ['TimezoneService', 'ConfigurationService', 'I18n', '$timeout', require('./date/date-range-picker-directive')])
+  .directive('opDatePicker', ['TimezoneService', 'ConfigurationService', 'I18n', '$timeout', require('./date/date-picker-directive')])
   .constant('ENTER_KEY', 13)
   .directive('executeOnEnter', ['ENTER_KEY', require(
     './execute-on-enter-directive')])

frontend/public/templates/components/inplace_editor/date/date_picker.html

@@ -0,0 +1,4 @@
+<div class="date-picker">
+	<input ng-model="editableDate" ng-click="click(this)" ng-change="change(this)" />
+	<div></div>
+</div>

frontend/public/templates/components/inplace_editor/date/date_range_picker.html

@@ -0,0 +1,5 @@
+<div class="date-range-picker">
+	<input type="text" class="start" name="from">
+	<span>-</span>
+	<input type="text" class="end" name="to">
+</div>

frontend/public/templates/components/inplace_editor/display/daterange.html

@@ -1 +1 @@
-<op-date date-value="readValue.startDate"></op-date> <span ng-if="readValue.dueDate || (!readValue.dueDate && !readValue.startDate)">-</span> <op-date date-value="readValue.dueDate"></op-date>
+<op-date date-value="readValue.startDate" no-date-text=""></op-date> - <op-date date-value="readValue.dueDate" no-date-text=""></op-date>

frontend/public/templates/components/inplace_editor/editable/daterange.html

@@ -1 +1 @@
-<op-date-range start-date="dataObject.startDate" end-date="dataObject.dueDate"></op-date-range>
+<op-date-range-picker start-date="dataObject.startDate" end-date="dataObject.dueDate"></op-date-range-picker>