我想将 md-datepicker 的格式设置为 dd-mm-yyyy答案

【问题标题】：i want set format of md-datepicker to dd-mm-yyyy我想将 md-datepicker 的格式设置为 dd-mm-yyyy
【发布时间】：2017-06-24 22:26:56
【问题描述】：

角度材料的日期选择器。我想将日期选择器的格式更改为 dd-mm-yyyy。

angular.module('MyApp')
.controller('AppCtrl', function($scope) {
  $scope.myDate = new Date();

  $scope.minDate = new Date(
    $scope.myDate.getFullYear(),
    $scope.myDate.getMonth() - 2,
    $scope.myDate.getDate());

  $scope.maxDate = new Date(
    $scope.myDate.getFullYear(),
    $scope.myDate.getMonth() + 2,
    $scope.myDate.getDate());    }).config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('YYYY-MM-DD');
};
});

但我希望对应用程序中的所有日期选择器进行一次配置。我认为这个示例适用于单个日期选择器。

【问题讨论】：

stackoverflow.com/questions/32566416/…
是 uib-datepicker 吗？那么这应该有助于stackoverflow.com/questions/23343371/…
Angular bootstrap datepicker date format does not format ng-model value的可能重复
由 angular.module('app').config(function($mdDateLocaleProvider) { $mdDateLocaleProvider.formatDate = function(date) { return moment(date).format('YYYY-MM- DD'); }; });

标签： angularjs angularjs-material

【解决方案1】：

您可以从下面的代码轻松完成，

app.config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
        if (!date) {return '';}
        else{
            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);
    };
});

【讨论】：

【解决方案2】：

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

【讨论】：

@MuhamedShafeeq momentjs 必须包含在您的项目中才能使用它。

【解决方案3】：

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

// 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, "dd-MM-yyyy");
      };

});

【讨论】：

【解决方案4】：

使用 Javascript 库来实现这一点

将此 Moment-with locals.min.js 文件添加到您的页面

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>

然后在您的应用程序配置模块中..

angular.module('timeApp').config(function ($mdDateLocaleProvider) {

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

})

在 HTML 页面中

 <md-datepicker ng-model="dateofbirth" md-current-view="year" md-placeholder="Enter Date of Birth" md-open-on-focus></md-datepicker>

【讨论】：