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

Posted 2023-05-07

【中文标题】angular-ui datepicker datepicker 的初始状态不是按 datepicker-popup 格式化的

【英文标题】：angular-ui datepicker initial state of datepicker not formatted per datepicker-popup

【发布时间】：2014-11-29 02:28:03

【问题描述】：

我正在使用一个 angular-ui 日期选择器，除了日期选择器的初始状态之外，一切实际上都运行良好。在我选择一个日期之后，它看起来不错。见下文：

初始状态

在选择器中选择日期后

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

标记

<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 开头，而不是按日期对象格式化，那就太好了。此外，不确定它是否有所作为，但这个日期选择器在模式中。感谢您的帮助！

更新

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

【参考方案1】：

在哪里/哪里我发现它们很长，通过指令处理等。所以我更喜欢这个简短的

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

注意：不要忘记将 angular 内置 $filter 服务注入控制器

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

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

       /* your code here */ 
]);

希望这会有所帮助。

【讨论】：

不幸的是，这会将绑定属性转换为字符串而不是日期，然后一旦选择了另一个日期，它将被转换回日期，因此像 Andreas Ågren 的解决方案意味着您必须在提交之前进行一些类型检查

为了改进这一点，在您使用的日期字段中添加一个手表，将添加一个单独的答案。

【参考方案2】：

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

【讨论】：

对我来说非常好！谢谢，这是 angularjs 库问题..我的是 1.3，只需将其注入您的指令，您应该会很好！

【参考方案3】：

为了改进 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');
);

【参考方案4】：

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

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

【讨论】：

这确实可以解决显示问题，但它会将您绑定的模型 var 转换为时间戳 int 而不是 Date 对象。如果单击弹出窗口中的日期并没有再次将其转换回 Date 对象，那还不错，这意味着使用它的代码需要先进行繁琐的类型检查。