angular-ui datepicker datepicker的初始状态未格式化为每个datepicker-popup

我正在使用angular-ui datepicker，并且一切实际上都正常工作，但datepicker的初始状态除外。当我选择一个日期时，它看起来很好。请看下图：angular-ui datepicker datepicker的初始状态未格式化为每个datepicker-popup

初始状态

enter image description here

在选择器

enter image description here

所以选择了日期后，显然我得到的的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>

的控制器

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开始，而不是一个严格的日期对象。此外，不知道它有什么不同，但这个日期选择器是在一个模式。谢谢你的帮助！

UPDATE

看起来像我不是唯一一个遇到此，并且它与使用角1.3。 https://github.com/angular-ui/bootstrap/issues/2659

来源

2014-10-04 Greg

围绕着另一种工作为我工作，除了在GitHub的问题所描述的，是在毫秒时代的时间，而不是一个约会对象，如初始化模式：

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

来源

2014-12-11 09:16:57

这并努力解决显示问题，但它会将您的绑定模型var变成timestamp int而不是Date对象。如果在弹出窗口中点击日期不会再次将其重新转换为Date对象，这意味着使用它的代码首先需要执行麻烦的类型检查。 – Fasermaler 2015-03-02 12:56:31

我类似的问题，看起来像引导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

来源

2015-03-11 20:59:47 ch4nd4n

这不适用于角1.3.15 – 2015-04-23 21:51:32

工作对我来说非常好！谢谢，这是angularjs库问题..mine是1.3，只是注入它的指令，你应该是好的！ – Manam 2016-03-30 18:38:31

在哪里/哪里以往的解决方案，我发现他们是漫长的，由指令等处理所以我更喜欢这短短的一个

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

注：不要忘记注入角建于$过滤服务到控制器

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

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

     /* your code here */ 
}]);

希望这有助于。

来源

2015-03-31 13:04:27

不幸的是，这个绑定属性变成了一个不是日期的字符串，然后一旦选择了另一个日期，它就会变回日期，就像AndreasÅgren的解决方案意味着在提交前必须进行一些类型检查。 – csharpsql 2015-04-24 09:38:22

为了改善这一点，手表到您使用的日期字段，将添加一个单独的答案。 – csharpsql 2015-04-24 09:43:08

为了改善Premchandra辛格的答案，使用角$过滤服务的工作，但你也需要添加监视到你的日期字段应用在未来的更新过滤器：

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

来源

2015-04-24 09:45:35 csharpsql

angular-ui datepicker datepicker的初始状态未格式化为每个datepicker-popup

回答

相关问题