ui bootstrap 日期选择器没有将 js Date() 对象作为字符串

Question

我在我的项目中使用 ui bootstrap datepicker，当我从数据库获取数据时，这个日期值的类型 Thu Aug 11 2016 00:00:00 GMT+0530 (India Standard Time) 是 string 当我使用

new Date('Thu Aug 11 2016 00:00:00 GMT+0530 (India Standard Time)');

然后它就可以正常工作了，我不想用new Date();在controller中转换它，我实际上想用directive或[=19=来实现这个转换] 我怎样才能做到这一点？我的日期选择器字段是：

<input type="text" class="form-control custom-form-control" uib-datepicker-popup="{{format}}" ng-model="moduleName.main.expiryDate" is-open="expiryDateCal.opened" datepicker-options="expiryDateOptions" name="expiryDate" ng-required="true" close-text="Close"/>

Answer 1

在 with ng-model 的情况下使用过滤器不是一个好主意。因此我创建了一个指令，将字符串日期转换为 Date 对象。

运行检查 working.Hope 的代码示例这有帮助，您只需根据需要将 date 属性添加到带有 ng-model 的 HTML 标签。

var app = angular.module('app',[]);
app.controller('Ctrl',function($scope,$filter){
  
  $scope.date="Thu Aug 11 2016 00:00:00 GMT+0530 (India Standard Time)";
   
  });

app.directive('date', function(dateFilter) {
  return {
    require: 'ngModel',
    
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return new Date(data); //converted
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return new Date(data); //converted
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" class="widget-content" ng-controller="Ctrl">

  <input type="text" ng-model="date" date/>
  </div>

ui bootstrap 日期选择器没有将 js Date() 对象作为字符串

ui bootstrap datepicker not taking js Date() object as string

angularjs

angularjs-directive

angular-ui-bootstrap

angular-filters