feat(QDatetimePicker): RTL support

Author: rstoenescu

src/components/datetime/QDatetimePicker.mat.vue

@@ -108,7 +108,7 @@
               dense
               flat
               class="q-datetime-arrow"
-              :icon="$q.icon.datetime.arrowLeft"
+              :icon="dateArrow[0]"
               :repeatTimeout="__repeatTimeout"
               :disable="beforeMinDays > 0 || disable || readonly"
               @click="setMonth(month - 1)"
@@ -121,7 +121,7 @@
               dense
               flat
               class="q-datetime-arrow"
-              :icon="$q.icon.datetime.arrowRight"
+              :icon="dateArrow[1]"
               :repeatTimeout="__repeatTimeout"
               :disable="afterMaxDays > 0 || disable || readonly"
               @click="setMonth(month + 1)"
@@ -287,6 +287,10 @@ export default {
       this.color && cls.push(`text-${this.color}`)
       return cls
     },
+    dateArrow () {
+      const val = [ this.$q.icon.datetime.arrowLeft, this.$q.icon.datetime.arrowRight ]
+      return this.$q.i18n.rtl ? val.reverse() : val
+    },
     computedFormat24h () {
       return this.format24h !== 0
         ? this.format24h

src/components/datetime/datetime.ios.styl

@@ -21,6 +21,7 @@
   text-align right
   position relative
   padding 0
+  direction ltr /* rtl:ignore */
 
 .q-datetime-col
   display block
@@ -65,6 +66,9 @@
   backface-visibility hidden
   transform-origin center center -110px
 
+[dir=rtl] .q-datetime-col-month .q-datetime-item
+  padding-right 5px
+
 .q-datetime-mask
   position absolute
   top 0

src/components/datetime/datetime.mat.styl

@@ -44,6 +44,7 @@ div + .q-datetime-time
 
 .q-datetime-clockstring
   font-size 2.7rem
+  direction: ltr /* rtl:ignore */
 
 .q-datetime-selector
   height 310px
@@ -179,7 +180,7 @@ body.desktop .q-datetime-dark .q-datetime-clock-position:not(.active):hover
   line-height 32px
   margin 0
   padding 0
-  transform translate(-50%, -50%)
+  transform translate(-50%, -50%) /* rtl:ignore */
   border-radius 50%
   &:not(.active)
     color black
@@ -194,13 +195,13 @@ for $pos in 0..12
   $degree = (270 + 30 * $pos)
   .q-datetime-clock-pos-{$pos}
     top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
-    left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2)
+    left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */
 
 for $pos in 0..23
   $degree = (270 + 15 * $pos)
   .q-datetime-clock-pos-{$pos}.fmt24
     top round(((1 + sin($degree * 1deg)) * 100%) / 2, 2)
-    left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2)
+    left round(((1 + cos($degree * 1deg)) * 100%) / 2, 2) /* rtl:ignore */
 
 .q-datetime-range
   &.row