diff --git a/app/assets/javascripts/app/controllers/_ui_element/date.coffee b/app/assets/javascripts/app/controllers/_ui_element/date.coffee
index 4ae6fc3f9..e70a6d834 100644
--- a/app/assets/javascripts/app/controllers/_ui_element/date.coffee
+++ b/app/assets/javascripts/app/controllers/_ui_element/date.coffee
@@ -70,6 +70,7 @@ class App.UiElement.date
       todayBtn: 'linked'
       todayHighlight: true
       format: App.i18n.timeFormat().date
+      rtl: App.i18n.dir() is 'rtl'
       container: item
       language: 'custom'
     )
diff --git a/app/assets/javascripts/app/controllers/_ui_element/datetime.coffee b/app/assets/javascripts/app/controllers/_ui_element/datetime.coffee
index 1c02e7626..6e8397572 100644
--- a/app/assets/javascripts/app/controllers/_ui_element/datetime.coffee
+++ b/app/assets/javascripts/app/controllers/_ui_element/datetime.coffee
@@ -70,6 +70,7 @@ class App.UiElement.datetime
       todayBtn: 'linked'
       todayHighlight: true
       format: App.i18n.timeFormat().date
+      rtl: App.i18n.dir() is 'rtl'
       container: item
       language: 'custom'
     )
diff --git a/app/assets/javascripts/app/controllers/layout_ref.coffee b/app/assets/javascripts/app/controllers/layout_ref.coffee
index 07ee4bafa..7c23a4cac 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.coffee
@@ -1516,6 +1516,7 @@ class InputsRef extends App.ControllerContent
       todayHighlight: true
       startDate: new Date()
       format: App.i18n.timeFormat().date
+      rtl: App.i18n.dir() is 'rtl'
       container: @$('.js-datepicker3').parent()
     )
 
@@ -1524,6 +1525,7 @@ class InputsRef extends App.ControllerContent
       todayHighlight: true
       startDate: new Date()
       format: App.i18n.timeFormat().date
+      rtl: App.i18n.dir() is 'rtl'
       container: @$('.js-datepicker4').parent()
     )
     @$('.js-timepicker4').timepicker()
diff --git a/app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js b/app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js
index c08105f0b..3e56e7700 100755
--- a/app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js
+++ b/app/assets/javascripts/app/lib/bootstrap/bootstrap-datepicker.js
@@ -702,7 +702,8 @@
 			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 left = offset.left - appendOffset.left,
-				top = offset.top - appendOffset.top;
+				top = offset.top - appendOffset.top,
+				right = container.width() - width - left;
 
 			this.picker.removeClass(
 				'datepicker-orient-top datepicker-orient-bottom '+
@@ -713,6 +714,8 @@
 				this.picker.addClass('datepicker-orient-' + this.o.orientation.x);
 				if (this.o.orientation.x === 'right')
 					left -= calendarWidth - width;
+					if(this.o.rtl)
+						right -= calendarWidth - width;
 			}
 			// auto x orientation is best-placement: if it crosses a window
 			// edge, fudge it sideways
@@ -725,6 +728,7 @@
 					// the calendar passes the widow right edge. Align it to component right side
 					this.picker.addClass('datepicker-orient-right');
 					left = offset.left + width - calendarWidth;
+					right = 0;
 				} else {
 					// Default to left
 					this.picker.addClass('datepicker-orient-left');
@@ -747,7 +751,6 @@
 				top += height;
 
 			if (this.o.rtl) {
-				var right = windowWidth - (left + width);
 				this.picker.css({
 					top: top,
 					right: right,