angular-ui datepicker datepicker的初始状态未按datepicker-popup格式化

Question

我正在使用angular-ui datepicker，除了datepicker的初始状态之外，一切都工作正常。我选择约会后，看起来很好。见下文：

初始状态

在选择器中选择日期后

所以，很明显我在第一种情况下获得了日期对象的严格版本，并在选择日期后进行了格式化。

标记

<input type="text" class="form-control"
       id="birthday"
       datepicker-options="datePickerOptions"
       datepicker-popup="{{format}}"
       data-ng-model="birthday"
       data-is-open="opened"
       data-ng-required="true"
       data-close-text="Close"/>

<span class="input-group-btn">
    <button type="button"
            class="btn btn-default"
            data-ng-click="open($event)">
        <i class="fa fa-calendar"></i>
    </button>
</span>

控制器

var today = $scope.today = function today() {
    $scope.birthday = $scope.client.birthday || new Date();
};
today();

$scope.clear = function clear() {
    $scope.dt = null;
};

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
};

$scope.format = 'MMM d, yyyy';
$scope.datePickerOptions = {
    'show-weeks': false
};

并不是什么大不了的事，但如果模型（需要是每个文档的日期对象）按照$scope.format开始格式化而不是格式化的日期对象，那将会非常好。此外，不确定它是否有所作为，但这个日期选择器在一个模态内。谢谢你的帮助！

更新

看起来我并不是唯一遇到这种情况的人，而且它与使用角度1.3相关。 https://github.com/angular-ui/bootstrap/issues/2659

Answer 1

在哪里/哪里有解决方案，我发现它们很长，按指令处理等等。所以我更喜欢这个简短的

birthday = $filter('date')(new Date(), "MMM dd, yyyy");

注意：请勿忘记将 $ filter 服务内置的角度注入控制器

angular.module('app').controller("yourController", 
['$filter' function($filter){ 
       /* your code here */  

       birthday = $filter('date')(new Date(), "MMM dd, yyyy");

       /* your code here */ 
}]);

希望这有帮助。

Answer 2

我有类似的问题，看起来像bootstrap UI与AngularJS 1.3.x版本不兼容

此plunkr为我解决了问题http://plnkr.co/edit/L9u12BeeBgPC2z0nlrLZ?p=preview

// this is the important bit:
.directive('datepickerPopup', function (){
  return {
    restrict: 'EAC',
    require: 'ngModel',
    link: function(scope, element, attr, controller) {
      //remove the default formatter from the input directive to prevent conflict
      controller.$formatters.shift();
    }
  }
});

另请参阅Github票证https://github.com/angular-ui/bootstrap/issues/2659#issuecomment-60750976

Answer 3

要改进Premchandra Singh的答案，使用角度$ filter服务确实有效，但您还需要在日期字段中添加一个监视器，以便在将来的更新中应用过滤器：

$scope.myDate = $filter('date')(new Date(), 'dd.MM.yy');
$scope.$watch('myDate', function (newValue, oldValue) {
    $scope.myDate = $filter('date')(newValue, 'dd.MM.yy');
});

Answer 4

除了github问题中描述的那个之外，另一个对我有用的工作是用毫秒而不是日期对象来初始化模型，例如：

$scope.dt = new Date().getTime();