#91 fix problem with rtl website

Author: hexadecy

css/material-datetimepicker.css

@@ -273,6 +273,10 @@ md-dialog.dtp {
     background: #eee;
 }
 
+html[dir="rtl"] .dtp div.dtp-picker-clock {
+    direction: ltr; 
+}
+
 .dtp-clock-center {
     width: 15px;
     height: 15px;

index.html

@@ -30,9 +30,9 @@ <h1>Angular Material DatePicker</h1>
   <md-card layout="column">
     <md-toolbar class="md-primary">
       <div class="md-toolbar-tools">
-        <h2>
-          <span>Datetime Pickers</span>
-        </h2>
+        <h2>Datetime Pickers</h2> 
+        <div flex></div>
+        <md-button class="md-raised" ng-click="changeDir()">{{txtdir}}</md-button>
       </div>
     </md-toolbar>
     <md-card-content class="md-padding">
@@ -52,7 +52,7 @@ <h2>
 
       <div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
         <md-input-container flex-gt-md="30">
-          <label>Timepicker Only (12-hour)</label>
+          <label>Timepicker Only | 12-hour</label>
           <input mdc-datetime-picker date="false" time="true" type="text" id="time" short-time="true"
                  placeholder="Time"
                  min-date="minDate"
@@ -63,7 +63,7 @@ <h2>
       </div>
       <div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
         <md-input-container flex-gt-md="30">
-          <label>Timepicker Only (24-hour)</label>
+          <label>Timepicker Only | 24-hour</label>
           <input mdc-datetime-picker date="false" time="true" type="text" id="time2"
                  placeholder="Time"
                  min-date="minDate"

js/demo.js

@@ -27,6 +27,12 @@
           });
       };
 
+      // Set and change the text direction
+      $scope.txtdir = document.documentElement.dir || 'ltr';
+      $scope.changeDir = function () {
+        $scope.txtdir = document.documentElement.dir = ($scope.txtdir === 'rtl') ? 'ltr' : 'rtl';
+      };
+
     })
 
     .directive('exSourceCode', function () {