角度材料（md-datepicker） - 如何在一页中将不同的日期格式设置为不同的日期选择器答案

【问题标题】：angular material (md-datepicker) - how to set different date format to different datepicker in one page角度材料（md-datepicker） - 如何在一页中将不同的日期格式设置为不同的日期选择器
【发布时间】：2017-12-25 08:41:53
【问题描述】：

我正在使用角度材料（md-datepicker）。我的要求是根据选择设置不同的日期格式。即如果用户选择“每日”，日期选择器将显示“MM/DD/YYYY”。如果用户选择 'monthly' 那么 datepicker 应该显示 'MMM YYYY' 而对于 'hourly'，它应该是 'MM/DD/YYYY hh:mm'

https://plnkr.co/edit/S4mnF7?p=preview

使用 md-datepicker 可行吗？我没有看到在 HTML 中设置格式属性的任何选项。看到$mdDateLocaleProvider的文档。但它没有提供为不同控件设置不同格式的选项。

【问题讨论】：

标签： javascript angularjs datepicker angular-material

【解决方案1】：

您可以使用$mdDateLocaleProvider，formatDate函数设置日期格式：函数将日期对象格式化为字符串。 datepicker 指令还提供时区（如果已指定）。

在 datepicker 指令中，您可以使用 md-date-locale 属性：这允许在每个元素的基础上覆盖来自 $mdDateLocaleProvider 的值（例如 msgOpenCalendar 可以用 md-date-locale=" 覆盖{ msgOpenCalendar: '打开一个特殊的日历' }").

类似：

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

在控制器中

$scope.mylocale = {
  formatDate: function(date) {
    var m = moment(date);
    return m.isValid() ? m.format('YYYY') : '';
  }
};
$scope.myOtherlocale = {
  formatDate: function(date) {
    var m = moment(date);
    return m.isValid() ? m.format('MMMM YYYY') : '';
  }
};

https://embed.plnkr.co/u9wY3rvtpmXdQ7zrbMpB/

【讨论】：

完美！！这正是我正在寻找的。谢谢你的回答