用momentjs改变Angular Material中md-datepicker的格式

在Angular Material文档中有$mdDateLocaleProvider的文档。

angular.module('app').config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
       return moment(date).format('YYYY-MM-DD');
    };
});

如果您不使用moment.js，请将formatDate中的代码替换为您希望用于格式化日期的任何代码。

下面是一个基于Angular Material文档中的示例的CodePen示例。

对于kazuar指出的问题:

不幸的是，如果从键盘输入日期，则不起作用

还应该定义parseDate方法。来自文档:

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'L', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};

一个完整的例子，我有在我的应用程序(使用moment):

$mdDateLocaleProvider.formatDate = function(date) {
    return moment(date).format('DD/MM/YYYY');
};
$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};

Regards

对于那些不使用Moment.js的人，您可以格式化为字符串:

.config(function($mdDateLocaleProvider) {
  $mdDateLocaleProvider.formatDate = function(date) {
    var day = date.getDate();
    var monthIndex = date.getMonth();
    var year = date.getFullYear();
    return day + '/' + (monthIndex + 1) + '/' + year;
  };
});

当从键盘输入日期并在初始化时返回null以避免md-datapicker指令中的按摩'无效日期'时工作完美:

$mdDateLocaleProvider.formatDate = function(date) {
  return date ? moment(date).format('DD/MM/YYYY') : null;
};
$mdDateLocaleProvider.parseDate = function(dateString) {
  var m = moment(dateString, 'DD/MM/YYYY', true);
  return m.isValid() ? m.toDate() : new Date(NaN);
};

—当我们在md-dialog中使用md-DatePicker时，$mdDateLocaleProvider服务不会按我们需要的格式格式化日期。我们必须在md-dialog的控制器中使用$mdDateLocale来格式化md-DatePicker的日期。例如-

angular.module('MyApp').controller('AppCtrl', function($scope, $mdDateLocale) {
  $mdDateLocale.formatDate = function(date) {
    return moment(date).format('YYYY-MM-DD');
  };
  $scope.myDate = new Date('2015-10-15');
  $scope.minDate = new Date();
  $scope.maxDate = new Date();
});

在AngularJS 1.5.9和moment 2.17.1中完全可以在运行时更改日期格式、月份名称和星期名称。

首先配置初始语言。(在这个例子中，angular-translate/$translateProvider的配置是可选的。)

angular.module('app').config(configureLocalization)
configureLocalization.$inject = ['$translateProvider', '$mdDateLocaleProvider', 'localdb', '__config'];
function configureLocalization($translateProvider, $mdDateLocaleProvider, localdb, __config) {
  // Configure angular-translate
  $translateProvider.useStaticFilesLoader({
      prefix: 'locale/',
      suffix: '.json'
  });
  // get the language from local storage using a helper 
  var language = localdb.get('language');
  if (!language || language === 'undefined') {
    localdb.set('language', (language = __config.app.defaultLanguage));
  }
  // Set the preferredLanguage in angular-translate
  $translateProvider.preferredLanguage(language);
  // Change moment's locale so the 'L'-format is adjusted.
  // For example the 'L'-format is DD.MM.YYYY for German
  moment.locale(language);
  // Set month and week names for the general $mdDateLocale service
  var localeData = moment.localeData();
  $mdDateLocaleProvider.months      = localeData._months;
  $mdDateLocaleProvider.shortMonths = moment.monthsShort();
  $mdDateLocaleProvider.days        = localeData._weekdays;
  $mdDateLocaleProvider.shortDays   = localeData._weekdaysMin;
  // Optionaly let the week start on the day as defined by moment's locale data
  $mdDateLocaleProvider.firstDayOfWeek = localeData._week.dow;
  // Format and parse dates based on moment's 'L'-format
  // 'L'-format may later be changed
  $mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'L', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
  };
  $mdDateLocaleProvider.formatDate = function(date) {
    var m = moment(date);
    return m.isValid() ? m.format('L') : '';
  };
}

之后，你可能会有一些基本控制器来监视语言变量，当用户选择另一种语言时，语言变量会发生变化。

angular.module('app').controller('BaseCtrl', Base);
Base.$inject = ['$scope', '$translate', 'localdb', '$mdDateLocale'];
function Base($scope, $translate, localdb, $mdDateLocale) {
  var vm = this;
  vm.language = $translate.use();
  $scope.$watch('BaseCtrl.language', function(newValue, oldValue) {
    // Set the new language in local storage
    localdb.set('language', newValue);
    $translate.use(newValue);
    // Change moment's locale so the 'L'-format is adjusted.
    // For example the 'L'-format is DD-MM-YYYY for Dutch
    moment.locale(newValue);
    // Set month and week names for the general $mdDateLocale service
    var localeDate = moment.localeData();
    $mdDateLocale.months      = localeDate._months;
    $mdDateLocale.shortMonths = moment.monthsShort();
    $mdDateLocale.days        = localeDate._weekdays;
    $mdDateLocale.shortDays   = localeDate._weekdaysMin;
    // Optionaly let the week start on the day as defined by moment's locale data
    $mdDateLocale.firstDayOfWeek = localeData._week.dow;
  });
}

注意我们不需要改变$mdDateLocale.formatDate和$mdDateLocale.parseDate方法，因为它们已经被配置为使用'L'格式，通过调用moment.locale(newValue)来改变。

请参阅$mdDateLocaleProvider的文档以获得更多的区域设置定制:https://material.angularjs.org/latest/api/service/$mdDateLocaleProvider

附加:这就是语言选择器的样子:

<md-select ng-model="BaseCtrl.language" class="md-no-underline">
  <md-option
    ng-repeat="language in ['en', 'de', 'fr', 'nl']"
    ng-value ="language"
  ><span
    class    ="flag-icon flag-icon-{{language ==='en' ? 'gb' : language}}"
  ></span>
  </md-option>
</md-select>

使用$filter代替moment.js，并参考@Ian Poston Framer和@java dev对我的响应，以下最终为我工作:

angular
    .module('App', ['ngMaterial'])
    .run(function($mdDateLocale, $filter) {
        $mdDateLocale.formatDate = function(date) {
            return $filter('date')(date, "dd-MM-yyyy");
        };
    })

我不能将$filter注入.config，因为它不是一个提供者，所以我不得不在.run内使用$mdDateLocale。

我有同样的问题，并在moment.js的帮助下提出了这个简单的解决方案。我使用了ng-change属性，当日期更改时触发。

在你的HTML中:

<md-datepicker ng-model="myDate" ng-change="dateChanged()"></md-datepicker>

控制器内部:

$scope.dateChanged = function() {
    this.myDate = moment(this.myDate).format('YYYY/MM/DD');
}

我想提供我的解决方案，100%基于Christiaan Westerbeek的帖子。我真的很喜欢他所做的，但我个人想要一些更简单的东西。

appConfig.js

// config params in global scope that need to be set outside of Angular (due to Angular limitiations)
var appConfig = {
    // enables the dynamic setting of md-datepicker display masks (eg. when user changes language from English to Spanish)
    date: {
        // default mask
        format: "MM/dd/yyyy",
        // md-datepicker display format
        mdFormatDate: function (date) {
            if (date && date instanceof Date) {
                return date.format(appConfig.date.format);
            } else {
                return null;
            }
        }
    }
};

app.material.config.js

// set angular material config
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
    // this is a global object set inside appConfig.js
    $mdDateLocaleProvider.formatDate = appConfig.date.mdFormatDate;
}]);

一些处理本地化/翻译等的服务文件

// inside the service where you'd track the language/locale change
service._updateConfigDateFormat = function (theNewDateFormat) {
    // where theNewDateFormat is something like 'yyyy/MM/dd' or whatever
    daepConfig.date.format = theNewDateFormat;
};

如果你使用的是最新版本的angular-material.js，请使用$mdDateLocale服务。这个代码示例使用angular内置的日期过滤器来替代moment.js库。使用angular的$filter服务查看其他日期格式选项，请参见此链接https://docs.angularjs.org/api/ng/filter/date。

// mainController.js
angular.module('app').config(function($mdDateLocale, $filter, $scope) {
  // FORMAT THE DATE FOR THE DATEPICKER
  $mdDateLocale.formatDate = function(date) {
        return $filter('date')($scope.myDate, "mediumDate");
  };
});

我使用$mdDateLocaleProvider在前端进行格式化。如果你想在发送日期到后端时格式化日期，下面的方法对我有用:-

$filter('date')(this.date, 'MM/dd/yyyy');

我有上面的控制器

在我的情况下，我失去了占位符一切工作，但占位符消失时，我使用自定义格式。下面几行解决了占位符的问题。

$mdDateLocaleProvider.formatDate = function (date) {
                if(date==null)
                return "";
                var m = moment(date);
                return m.isValid() ? m.format('L') : '';
            };