Datetime: add rtl support (correct arrows & positioning), fixes #1842

This commit is contained in:
Felix Niklas 2018-04-12 16:50:04 +02:00
parent d8faaebbc7
commit b585f46ac6
4 changed files with 9 additions and 2 deletions

View file

@ -70,6 +70,7 @@ class App.UiElement.date
todayBtn: 'linked' todayBtn: 'linked'
todayHighlight: true todayHighlight: true
format: App.i18n.timeFormat().date format: App.i18n.timeFormat().date
rtl: App.i18n.dir() is 'rtl'
container: item container: item
language: 'custom' language: 'custom'
) )

View file

@ -70,6 +70,7 @@ class App.UiElement.datetime
todayBtn: 'linked' todayBtn: 'linked'
todayHighlight: true todayHighlight: true
format: App.i18n.timeFormat().date format: App.i18n.timeFormat().date
rtl: App.i18n.dir() is 'rtl'
container: item container: item
language: 'custom' language: 'custom'
) )

View file

@ -1516,6 +1516,7 @@ class InputsRef extends App.ControllerContent
todayHighlight: true todayHighlight: true
startDate: new Date() startDate: new Date()
format: App.i18n.timeFormat().date format: App.i18n.timeFormat().date
rtl: App.i18n.dir() is 'rtl'
container: @$('.js-datepicker3').parent() container: @$('.js-datepicker3').parent()
) )
@ -1524,6 +1525,7 @@ class InputsRef extends App.ControllerContent
todayHighlight: true todayHighlight: true
startDate: new Date() startDate: new Date()
format: App.i18n.timeFormat().date format: App.i18n.timeFormat().date
rtl: App.i18n.dir() is 'rtl'
container: @$('.js-datepicker4').parent() container: @$('.js-datepicker4').parent()
) )
@$('.js-timepicker4').timepicker() @$('.js-timepicker4').timepicker()

View file

@ -702,7 +702,8 @@
var height = this.component ? this.component.outerHeight(true) : this.element.outerHeight(false); var height = this.component ? this.component.outerHeight(true) : this.element.outerHeight(false);
var width = this.component ? this.component.outerWidth(true) : this.element.outerWidth(false); var width = this.component ? this.component.outerWidth(true) : this.element.outerWidth(false);
var left = offset.left - appendOffset.left, var left = offset.left - appendOffset.left,
top = offset.top - appendOffset.top; top = offset.top - appendOffset.top,
right = container.width() - width - left;
this.picker.removeClass( this.picker.removeClass(
'datepicker-orient-top datepicker-orient-bottom '+ 'datepicker-orient-top datepicker-orient-bottom '+
@ -713,6 +714,8 @@
this.picker.addClass('datepicker-orient-' + this.o.orientation.x); this.picker.addClass('datepicker-orient-' + this.o.orientation.x);
if (this.o.orientation.x === 'right') if (this.o.orientation.x === 'right')
left -= calendarWidth - width; left -= calendarWidth - width;
if(this.o.rtl)
right -= calendarWidth - width;
} }
// auto x orientation is best-placement: if it crosses a window // auto x orientation is best-placement: if it crosses a window
// edge, fudge it sideways // edge, fudge it sideways
@ -725,6 +728,7 @@
// the calendar passes the widow right edge. Align it to component right side // the calendar passes the widow right edge. Align it to component right side
this.picker.addClass('datepicker-orient-right'); this.picker.addClass('datepicker-orient-right');
left = offset.left + width - calendarWidth; left = offset.left + width - calendarWidth;
right = 0;
} else { } else {
// Default to left // Default to left
this.picker.addClass('datepicker-orient-left'); this.picker.addClass('datepicker-orient-left');
@ -747,7 +751,6 @@
top += height; top += height;
if (this.o.rtl) { if (this.o.rtl) {
var right = windowWidth - (left + width);
this.picker.css({ this.picker.css({
top: top, top: top,
right: right, right: right,