Angularjs 角度ui日期选择器日期选择器的初始状态未按日期选择器弹出窗口格式化

我使用的是一个有角度的ui日期选择器，除了日期选择器的初始状态外，其他一切都正常工作。在我选择了一个日期之后，它看起来很好。见下文：

初始状态

在选择器中选择日期后

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
};

很明显，在第一种情况下，我得到了日期对象的strigified版本，并在选择日期后格式化

标记

<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>

这没什么大不了的，但是如果模型（每个文档都需要是一个日期对象）是按照

$scope.format

进行格式化的，而不是一个严格的日期对象，那就太好了。另外，不确定它是否有区别，但是这个日期选择器在一个模式中。谢谢你的帮助

更新

---

看起来我不是唯一一个经历过这种情况的人，这与使用angular 1.3有关

除了github问题中描述的工作之外，另一个对我有效的解决方法是使用纪元时间（以毫秒为单位）而不是日期对象初始化模型，例如：

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

---

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

这件事为我解决了这个问题

---

另请参考Github票证我发现的Where/Where-ever解决方案，它们很长，由指令处理，等等。因此我更喜欢这个简短的解决方案

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 */ 
}]);

---

希望这能有所帮助。

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

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

---

这确实可以解决显示问题，但它会将绑定的模型变量转换为时间戳int而不是日期对象。如果在弹出窗口中单击某个日期时没有将其重新转换为日期对象，这也不会太糟糕，这意味着使用该日期的代码需要先执行繁琐的类型检查。不幸的是，这会将绑定属性转换为字符串而不是日期，然后，一旦选择了另一个日期，它将变回一个日期，因此像AndreasÅgren的解决方案一样，你必须在提交之前进行一些类型检查。为了改进这一点，在你使用的日期字段中添加一块手表，将添加一个单独的答案。对我来说效果非常好！！谢谢，这是angularjs库的问题。我的版本是1.3，只要把它注入到你的指令中，你就应该很好！

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