title: Parse date string to Date object when loading Angular UI Bootstrap Datepicker
body: <p>I'm using Angular UI Bootstrap Datepicker:
  <a href="https://angular-ui.github.io/bootstrap/#/datepicker">https://angular-ui.github.io/bootstrap/#/datepicker</a></p>
  
  <p>When I render form using data received from the server, there is problem with datetime fields. My input datepicker looks like this:</p>
  
  <pre><code>&lt;form name="itemForm"&gt;
      &lt;input type="datetime" class="form-control" id="startedAt" name="startedAt"
             ng-model="item.startedAt"
             ng-click="open($event, 'startedAt')"
             uib-datepicker-popup="yyyy-MM-dd"
             is-open="datepickers.startedAt"
      /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My server returns response datetime as JSON string:</p>
  
  <pre><code>{    
     ...
     startedAt: "2015-05-29T02:00:00+0200"
  }
  </code></pre>
  
  <p>When I assign response data to the model <code>$scope.item = response;</code>, datepicker input field is rendered correctly (correct date is selected and it's properly formatted in format I selected). The problem is that validation does not pass. I get:</p>
  
  <pre><code>itemForm.startedAt.$invalid == true
  </code></pre>
  
  <p>I noticed that data bound to the datepicker field should be <code>Date</code> object and not string (when I select new date from the datepicker, <code>$scope.item.startedAt</code> is a <code>Date</code>)</p>
  
  <p>I managed to work around this issue and do this in the controller:</p>
  
  <pre><code>$scope.item = response;
  $scope.item.startedAt = new Date($scope.item.startedAt);
  </code></pre>
  
  <p>It works this way... But I wouldn't like to manually convert string do date every time I get a response from the server. I tried to create a directive, that I can assign to the datepicker input field so it converts the <code>ng-model</code> for me:</p>
  
  <pre><code>.directive("asDate", function () {
      return {
          require: 'ngModel',
          link: function (scope, element, attrs, modelCtrl) {
  
              modelCtrl.$formatters.push(function (input) {
  
                  var transformedInput = new Date(input);
  
                  if (transformedInput != input) {
                      modelCtrl.$setViewValue(transformedInput);
                      modelCtrl.$render();
                  }
  
                  return transformedInput;
              });
          }
      }
  })
  </code></pre>
  
  <p>Well it works, because now I can see <code>Date</code> object, when I output model in my view: <code>{{item.startedAt}}</code>. However still <strong>validation fails</strong>! I suspect this is some problem with me understanding how data flows between model and the view, and how UI Bootstrap hooks into it.</p>
  
  <p>Also when I change my directive from <code>$formatters.push</code> to <code>$formatters.unshift</code>, validation works OK, but datepicker does not format my datetime (insted of nicely formattet <code>yyyy-MM-dd</code> I see ISO string inside the input)</p>