Add title labels. Remove console.log call.

frontend/app/templates/work_packages/inplace_editor/custom/editable/date.html

@@ -1,4 +1,8 @@
 <div class="inplace-edit--date">
-	<input execute-on-enter="execute()" ng-model="fieldController.writeValue" class="inplace-edit--date" type="text" />
+	<input execute-on-enter="execute()" 
+				 ng-model="fieldController.writeValue"
+				 title="{{ fieldController.editTitle }}"
+				 class="inplace-edit--date" 
+				 type="text" />
 	<div class="inplace-edit--date-picker"></div>
 </div>

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

@@ -27,7 +27,8 @@
 //++
 
 module.exports = function(TimezoneService, ConfigurationService,
-                          I18n, $timeout) {
+                          I18n, $timeout, WorkPackageFieldService,
+                          EditableFieldsState) {
   var parseDate = TimezoneService.parseDate,
       parseISODate = TimezoneService.parseISODate,
       formattedDate = function(date) {
@@ -39,8 +40,10 @@ module.exports = function(TimezoneService, ConfigurationService,
       customFormattedDate = function(date) {
         return parseISODate(date).format(customDateFormat);
       },
-      noStartDate = I18n.t('js.label_no_start_date'),
-      noEndDate = I18n.t('js.label_no_due_date');
+      getLabel = WorkPackageFieldService.getLabel.bind(null, EditableFieldsState.workPackage),
+      getTitle = function(labelName) {
+        return I18n.t('js.inplace.button_edit', {attribute: getLabel(labelName)});
+      };
   return {
     restrict: 'EA',
     replace: true,
@@ -59,18 +62,16 @@ module.exports = function(TimezoneService, ConfigurationService,
           divEnd = element.find('.inplace-edit--date-range-end-date-picker'),
           prevStartDate = '',
           prevEndDate = '',
-          setDate = function(div, input, date, noDate) {
+          setDate = function(div, input, date) {
             if(date) {
               div.datepicker('option', 'defaultDate', formattedDate(date));
               div.datepicker('option', 'setDate', formattedDate(date));
               input.val(customFormattedDate(date));
-              input.attr('title', customFormattedDate(date));
             } else {
               div.datepicker('option', 'defaultDate', null);
               div.datepicker('option', 'setDate', null);
               input.val('');
               input.change();
-              input.attr('title', noDate);
               date = null;
             }
           };
@@ -82,12 +83,12 @@ module.exports = function(TimezoneService, ConfigurationService,
       inputStart.attr({
         'placeholder': customDateFormat,
         'aria-label': customDateFormat,
-        'title': noStartDate
+        'title': getTitle('startDate')
       });
       inputEnd.attr({
         'placeholder': customDateFormat,
         'aria-label': customDateFormat,
-        'title': noEndDate
+        'title': getTitle('dueDate')
       });
 
       inputStart.on('change', function() {
@@ -96,7 +97,6 @@ module.exports = function(TimezoneService, ConfigurationService,
             scope.startDate = null;
           });
           inputStart.val('');
-          inputStart.attr('title', noStartDate);
           divEnd.datepicker('option', 'minDate', null);
           $timeout.cancel(startTimerId);
           return;
@@ -108,7 +108,6 @@ module.exports = function(TimezoneService, ConfigurationService,
 
           if(isValid){
             scope.startDate = formattedISODate(parseDate(date, customDateFormat));
-            inputStart.attr('title', customFormattedDate(date));
           }
         }, 1000);
       });
@@ -119,7 +118,6 @@ module.exports = function(TimezoneService, ConfigurationService,
             scope.endDate = null;
           });
           inputEnd.val('');
-          inputEnd.attr('title', noEndDate);
           divStart.datepicker('option', 'maxDate', null);
           $timeout.cancel(endTimerId);
           return;
@@ -131,7 +129,6 @@ module.exports = function(TimezoneService, ConfigurationService,
 
           if(isValid){
             scope.endDate = formattedISODate(parseDate(date, customDateFormat));
-            inputEnd.attr('title', customFormattedDate(date));
           }
         }, 1000);
       });
@@ -206,10 +203,10 @@ module.exports = function(TimezoneService, ConfigurationService,
         divEnd.datepicker('option', 'minDate', formattedDate(scope.startDate));
       }
 
-      setDate(divStart, inputStart, scope.startDate, noStartDate);
-      setDate(divEnd, inputEnd, scope.endDate, noEndDate);
+      setDate(divStart, inputStart, scope.startDate);
+      setDate(divEnd, inputEnd, scope.endDate);
       $timeout(function() {
-        inputStart.click();
+        inputStart.click().focus();
       });
 
       inputStart.on('click', function() {

frontend/app/ui_components/index.js

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

frontend/app/work_packages/directives/inplace_editor/custom/editable/inplace-editor-date-directive.js

@@ -62,13 +62,11 @@ module.exports = function(WorkPackageFieldService, EditableFieldsState,
               div.datepicker('option', 'defaultDate', formattedDate(date));
               div.datepicker('option', 'setDate', formattedDate(date));
               inp.val(customFormattedDate(date));
-              inp.attr('title', customFormattedDate(date));
             } else {
               div.datepicker('option', 'defaultDate', null);
               div.datepicker('option', 'setDate', null);
               inp.val('');
               inp.change();
-              inp.attr('title', '');
               date = null;
             }
           };
@@ -79,11 +77,9 @@ module.exports = function(WorkPackageFieldService, EditableFieldsState,
 
       input.attr({
         'placeholder': '-',
-        'aria-label': customDateFormat,
-        'title': customDateFormat
+        'aria-label': customDateFormat
       });
 
-      console.log(input);
       input.on('change', function() {
         if(input.val().trim() === '') {
           $timeout(function() {
@@ -144,7 +140,7 @@ module.exports = function(WorkPackageFieldService, EditableFieldsState,
       setDate(datepickerContainer, input, scope.fieldController.writeValue);
 
       $timeout(function() {
-        input.click();
+        input.click().focus();
       });
 
       angular.element('.work-packages--details-content').on('click', function(e) {