Получить значение ui.bootstrap.datepicker без времени и времени

Question

Мне нужно иметь возможность сохранить выбранное значение даты как дату без времени в моей ng-модели.

Вот мой вид:

<script type="text/ng-template" id="form_field_datetime"> 
    <h3 style="color:coral ;">{{field.displayName}}</h3> 
    <br /> 
    <div> 
    <div ng-controller="dateCtrl"> 
     <p class="input-group"> 
      <input type="text" class="form-control" datepicker-popup="{{format}}" is-open="opened" ng-required="true" ng-model="field.theValues[0]" /> 
      <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 

     </p> 
    </div> 
    </div> 
</script> 

На выборе даты, указанной выше сохраненного значения в моем нг-модели:

2012-03-12T22:00:00.000Z 

мне нужно:

2012-03-13 

Вот контроллер (довольно много, как и в example):

app.controller('dateCtrl', ['$scope', 
     function ($scope) { 
     $scope.open = function($event) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 

      $scope.opened = true; 
     }; 

     $scope.dateOptions = { 
      formatYear: 'yy', 
      startingDay: 0 
     }; 

     $scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
     $scope.format = $scope.formats[0]; 

     } 
    ]); 

Как обойти это?

Answer 1

Я использовал упомянутую ранее директиву в комментариях к моему вопросу для обработки выбранной даты и удаления информации о времени.

<script type="text/ng-template" id="form_field_date"> 
    <h3 style="color:coral ;">{{field.displayName}}</h3> 
    <br /> 
    <div> 
    <div ng-controller="dateCtrl"> 
     <p class="input-group"> 
      <input datepicker-localdate type="text" class="form-control" datepicker-popup="{{format}}" is-open="opened" ng-required="true" ng-model="field.theValues[0]" /> 
      <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 

     </p> 
    </div> 
    </div> 
</script> 

Controller (dateCtrl):

app.controller('dateCtrl', ['$scope', 
     function ($scope) { 
     $scope.open = function($event) { 
      $event.preventDefault(); 
      $event.stopPropagation(); 

      $scope.opened = true; 
     }; 

     $scope.dateOptions = { 
      formatYear: 'yy', 
      startingDay: 0 
     }; 

     $scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
     $scope.format = $scope.formats[0]; 

     } 
    ]); 

директива (DatePicker-LOCALDATE):

app.directive('datepickerLocaldate', ['$parse', function ($parse) { 
    var directive = { 
     restrict: 'A', 
     require: ['ngModel'], 
     link: link 
    }; 
    return directive; 

    function link(scope, element, attr, ctrls) { 
     var ngModelController = ctrls[0]; 

     // called with a JavaScript Date object when picked from the datepicker 
     ngModelController.$parsers.push(function (viewValue) { 
      console.log(viewValue);console.log(viewValue);console.log(viewValue); 
      // undo the timezone adjustment we did during the formatting 
      viewValue.setMinutes(viewValue.getMinutes() - viewValue.getTimezoneOffset()); 
      // we just want a local date in ISO format 
      return viewValue.toISOString().substring(0, 10); 
     }); 
    } 
}]); 

Это все теперь работает!