可以使用模型在 Angular JS material 中格式化日期吗？

Question

你好，我在 Whosebug 上找到了这个

我可以使用这个标记来格式化日期：

.module("myApp", ['ngMaterial'])
   .config(function ($mdDateLocaleProvider) {
        $mdDateLocaleProvider.formatDate = function (date) {
         return date ? moment(date).format('DD/MM/YYYY') : '';
    };
 })

是否可以使用属性而不是静态字符串来格式化日期？像这样：

return date ? moment(date).format($scope.format) : '';

谢谢。

Answer 1

config 在任何控制器之前加载，因此您不能使用 $scope。

所以你可以使用constant,a.e.:

.constant('Constants', {
    DATE_FORMAT:        'DD/MM/YYYY'
});

Because the constants are fixed, they get applied before other provide methods. See $provide.constant().

示例：

.module("myApp", ['ngMaterial'])
    .config(function ($mdDateLocaleProvider, Constants) {
        $mdDateLocaleProvider.formatDate = function (date) {
            return date ? moment(date).format(Constants.DATE_FORMAT) : '';
        };
    })

Answer 2

通过使用 md-date-locale 属性，可以使用技巧。

html:

<md-datepicker ng-model="myDate" md-date-locale="locale"></md-datepicker>

控制器：

$scope.format = 'L';
$scope.locale = {
  formatDate: function(date) {
    var m = moment(date);
    return m.isValid() ? m.format($scope.format) : '';
  }
};

动态格式：

如果你想让它动态化（改变格式=改变日期选择器格式），你需要重建日期选择器，在指令中添加一个 ng-if 是诀窍，然后像这样：

$scope.changeFormat = function() {
  $scope.format = 'DD MMMM YYYY';
  $scope.hideDate = true;
  $timeout(function() {
    $scope.hideDate = false;
  });
};

html:

<md-datepicker ng-if="!hideDate" ng-model="myDate" md-date-locale="locale"></md-datepicker>

工作 plunker：https://embed.plnkr.co/PvmkEhMOORq6LZTr5lJT/

更新：多个日期选择器和 $http 调用后

使用不同格式呈现的多个日期选择器，通过 $http 调用加载，您可以使用此方法完成此操作，因为每个日期选择器都可以通过 md-date-locale 拥有自己的配置。

例如，您可以通过函数构建语言环境：

function buildLocale(format) {
  return {
    formatDate: function(date) {
      return moment(date).isValid() ? moment(date).format(format) : '';
    }
  }
}

然后在构建日期选择器时调用 if:

$scope.locales = [];
$http.get('YOUR SERVER API').then(function(data) {
    $scope.datas = data.data;
    angular.forEach($scope.datas, function(item) {
      $scope.locales[item.data] = buildLocale(item.format);
    })
    //this is to build the datepicker only after all locales are built
    $scope.dateLoaded = true;
  });

和你的 html:

<div ng-if="dateLoaded"><!-- ng-if="dateLoaded" make it to render only after all locales are built -->
      <div ng-repeat="field in datas">
        <md-datepicker ng-model="models[data]" md-date-locale="locales[field.id]"></md-datepicker>
      </div>
    </div>

这是一个工作中的 plunker，展示了这个：https://embed.plnkr.co/fyGIC8UPxOsGs3kKlW9z/

可以使用模型在 Angular JS material 中格式化日期吗？

Format date in Angular JS material using model possible?

angularjs

angularjs-material

更新：多个日期选择器和 $http 调用后