TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix reversing day and month. Changed date-format on write. Added hints for date format.

Browse Source
pull/2900/head
mhirtie 10 years ago
parent e2118ed5fd
commit 83a03b3e99
3 changed files with 66 additions and 34 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      frontend/app/templates/components/inplace_editor/date/date_range_picker.html
  2. 91
      frontend/app/ui_components/date/date-range-picker-directive.js
  3. 5
      frontend/app/work_packages/directives/inplace_editor/custom/editable/inplace-editor-date-directive.js

4
frontend/app/templates/components/inplace_editor/date/date_range_picker.html
Unescape View File

@ -1,7 +1,7 @@
<div class="inplace-edit--date-range">
<input type="text" class="inplace-edit--date-range-start-date" ng-model="startDate" />
<input type="text" class="inplace-edit--date-range-start-date" execute-on-enter="execute()" ng-model="startDate" />
<span>-</span>
<input type="text" class="inplace-edit--date-range-end-date" ng-model="endDate"/>
<input type="text" class="inplace-edit--date-range-end-date" execute-on-enter="execute()" ng-model="endDate"/>
<div class="inplace-edit--date-range-start-date-picker"></div>
<div class="inplace-edit--date-range-end-date-picker"></div>
</div>

91
frontend/app/ui_components/date/date-range-picker-directive.js
Unescape View File

@ -29,10 +29,16 @@
module.exports = function(TimezoneService, ConfigurationService,
I18n, $timeout) {
var parseDate = TimezoneService.parseDate,
parseISODate = TimezoneService.parseISODate,
formattedDate = function(date) {
return TimezoneService.parseDate(date).format('L');
},
formattedISODate = TimezoneService.formattedISODate,
customDateFormat = 'YYYY-MM-DD',
datepickerFormat = 'yy-mm-dd',
customFormattedDate = function(date) {
return parseISODate(date).format(customDateFormat);
},
noStartDate = I18n.t('js.label_no_start_date'),
noEndDate = I18n.t('js.label_no_due_date');
return {
@ -46,13 +52,14 @@ module.exports = function(TimezoneService, ConfigurationService,
link: function(scope, element) {
var startTimerId = 0,
endTimerId = 0,
form = element.parents('.inplace-edit--form'),
inputStart = element.find('.inplace-edit--date-range-start-date'),
inputEnd = element.find('.inplace-edit--date-range-end-date'),
divStart = element.find('.inplace-edit--date-range-start-date-picker'),
divEnd = element.find('.inplace-edit--date-range-end-date-picker'),
prevStartDate = '',
prevEndDate = '',
addClearButton = function (div, inp) {
addClearButton = function (inp) {
setTimeout(function() {
var buttonPane = div.find('.ui-datepicker-buttonpane');
@ -76,65 +83,89 @@ module.exports = function(TimezoneService, ConfigurationService,
if(date) {
div.datepicker('option', 'defaultDate', formattedDate(date));
div.datepicker('option', 'setDate', formattedDate(date));
input.val(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;
}
};
inputStart.attr('placeholder', noStartDate);
inputEnd.attr('placeholder', noEndDate);
scope.execute = function() {
form.scope().editPaneController.submit(false);
};
inputStart.attr({
'placeholder': customDateFormat,
'aria-label': customDateFormat,
'title': noStartDate
});
inputEnd.attr({
'placeholder': customDateFormat,
'aria-label': customDateFormat,
'title': noEndDate
});
inputStart.on('change', function() {
if(inputStart.val().replace(/^\s+|\s+$/g, '') === '') {
if(inputStart.val().trim() === '') {
$timeout(function() {
scope.startDate = null;
});
inputStart.val('');
inputStart.attr('title', noStartDate);
inputEnd.datepicker('option', 'minDate', null);
$timeout.cancel(startTimerId);
return;
}
$timeout.cancel(startTimerId);
startTimerId = $timeout(function() {
var date = inputStart.val(),
isValid = TimezoneService.isValid(date, 'DD/MM/YYYY');
isValid = TimezoneService.isValid(date, customDateFormat);
if(isValid){
scope.startDate = formattedISODate(date);
scope.startDate = formattedISODate(parseDate(date, customDateFormat));
inputStart.attr('title', customFormattedDate(date));
}
}, 1000);
}).on('click', function() {
inputStart.datepicker('show');
});
inputEnd.on('change', function() {
if(inputEnd.val().replace(/^\s+|\s+$/g, '') === '') {
if(inputEnd.val().trim() === '') {
$timeout(function() {
scope.endDate = null;
});
inputEnd.val('');
inputEnd.attr('title', noEndDate);
inputStart.datepicker('option', 'maxDate', null);
$timeout.cancel(endTimerId);
return;
}
$timeout.cancel(startTimerId);
startTimerId = $timeout(function() {
$timeout.cancel(endTimerId);
endTimerId = $timeout(function() {
var date = inputEnd.val(),
isValid = TimezoneService.isValid(date, 'DD/MM/YYYY');
isValid = TimezoneService.isValid(date, customDateFormat);
if(isValid){
scope.endDate = formattedISODate(date);
scope.endDate = formattedISODate(parseDate(date, customDateFormat));
inputEnd.attr('title', customFormattedDate(date));
}
}, 1000);
}).on('click', function(){
inputEnd.datepicker('show');
});
divStart.datepicker({
firstDay: ConfigurationService.startOfWeek(),
showWeeks: true,
changeMonth: true,
numberOfMonths: 2,
showButtonPanel: true,
dateFormat: 'dd/mm/yy',
dateFormat: datepickerFormat,
inline: true,
alterOffset: function(offset) {
var wHeight = angular.element(window).height(),
@ -148,19 +179,18 @@ module.exports = function(TimezoneService, ConfigurationService,
return offset;
},
beforeShow: function() {
addClearButton(divStart, inputStart);
addClearButton(inputStart);
},
onChangeMonthYear: function() {
addClearButton(divStart, inputStart);
addClearButton(inputStart);
},
onSelect: function(selectedDate) {
if(!selectedDate || selectedDate === '' || selectedDate === prevStartDate) {
return;
}
var parsedDate = parseDate(selectedDate, 'DD/MM/YYYY');
prevStartDate = parsedDate;
prevStartDate = parseDate(selectedDate, customDateFormat);
$timeout(function() {
scope.startDate = formattedISODate(parsedDate);
scope.startDate = formattedISODate(prevStartDate);
});
divEnd.datepicker('option', 'minDate', selectedDate ? selectedDate : null);
divStart.hide();
@ -170,8 +200,7 @@ module.exports = function(TimezoneService, ConfigurationService,
firstDay: ConfigurationService.startOfWeek(),
showWeeks: true,
changeMonth: true,
numberOfMonths: 2,
dateFormat: 'dd/mm/yy',
dateFormat: datepickerFormat,
inline: true,
alterOffset: function(offset) {
var wHeight = angular.element(window).height(),
@ -185,19 +214,18 @@ module.exports = function(TimezoneService, ConfigurationService,
return offset;
},
beforeShow: function() {
addClearButton(divEnd, inputEnd);
addClearButton(inputEnd);
},
onChangeMonthYear: function() {
addClearButton(divEnd, inputEnd);
addClearButton(inputEnd);
},
onSelect: function(selectedDate) {
if(!selectedDate || selectedDate === '' || selectedDate === prevEndDate) {
return;
}
var parsedDate = parseDate(selectedDate, 'DD/MM/YYYY');
prevEndDate = parsedDate;
prevEndDate = parseDate(selectedDate, customDateFormat);
$timeout(function() {
scope.endDate = formattedISODate(parsedDate);
scope.endDate = formattedISODate(prevEndDate);
});
divStart.datepicker('option', 'maxDate', selectedDate ? selectedDate : null);
divEnd.hide();
@ -206,15 +234,18 @@ module.exports = function(TimezoneService, ConfigurationService,
if(scope.endDate) {
prevEndDate = formattedDate(scope.endDate);
divStart.datepicker('option', 'maxDate', formattedDate(scope.endDate));
inputStart.datepicker('option', 'maxDate', formattedDate(scope.endDate));
}
if(scope.startDate) {
prevStartDate = formattedDate(scope.startDate);
divEnd.datepicker('option', 'minDate', formattedDate(scope.startDate));
inputEnd.datepicker('option', 'minDate', formattedDate(scope.startDate));
}
setDate(divStart, inputStart, scope.startDate);
setDate(divEnd, inputEnd, scope.endDate);
setDate(inputStart, scope.startDate);
setDate(inputEnd, scope.endDate);
$timeout(function() {
inputStart.click();
});
inputStart.on('click', function() {
if(divStart.is(':hidden') || divEnd.is(':visible')) {

5
frontend/app/work_packages/directives/inplace_editor/custom/editable/inplace-editor-date-directive.js
Unescape View File

@ -35,8 +35,8 @@ module.exports = function(WorkPackageFieldService, EditableFieldsState,
return TimezoneService.parseDate(date).format('L');
},
formattedISODate = TimezoneService.formattedISODate,
customDateFormat = 'DD/MM/YYYY',
datepickerFormat = 'dd/mm/yy',
customDateFormat = 'YYYY-MM-DD',
datepickerFormat = 'yy-mm-dd',
customFormattedDate = function(date) {
return parseISODate(date).format(customDateFormat);
};
@ -66,6 +66,7 @@ module.exports = function(WorkPackageFieldService, EditableFieldsState,
angular.element( '<button>', {
text: 'Clear',
click: function() {
inp.focus();
setDate(inp, null);
}
})

Write Preview
Loading…
Cancel
Save