MD Datepicker 从月和年历模式中选择月和年后显示完整日期答案

【问题标题】：MD Datepicker shows the full date after selecting Month and year from month and year calendar modeMD Datepicker 从月和年历模式中选择月和年后显示完整日期
【发布时间】：2020-03-28 14:53:28
【问题描述】：

我正在使用 Material Design，并且只需要显示月份和年份。所以我使用了月份模式。但是现在当用户选择年份和月份时，整个日期都是可见的，例如，如果我从日期选择器中选择了 2019 年 2 月，它将显示您选择了 01/02/2019。相反，我们只需要 2019 年 2 月。

这是我的html md代码

<md-input-container flex="100" layout="column">
    <div style="font-size: 10px; color: blue;" 
         label ng-bind="::dateFields[2].label">
    </div>
    <md-datepicker ng-model="dateFields.selectedDate"
               ng-required="dateFields.required"
               md-date-locale="dateFields.locale"
               md-mode="month"
               md-open-on-focus="true">
    </md-datepicker>

为了得到选择后的月份和年份，我应该编辑什么？

【问题讨论】：

标签： javascript css angularjs angularjs-material

【解决方案1】：

您可以根据需要使用 moment js 来格式化日期，

var monthFormat = buildLocaleProvider("MMM-YYYY");
  var ymdFormat = buildLocaleProvider("YYYY-MM-DD");


  function buildLocaleProvider(formatString) {
    return {
      formatDate: function(date) {
        if (date) return moment(date).format(formatString);
        else return null;
      },
      parseDate: function(dateString) {
        if (dateString) {
          var m = moment(dateString, formatString, true);
          return m.isValid() ? m.toDate() : new Date(NaN);
        } else return null;
      }
    };
  }


  $scope.dateFields = {
    ......
    locale: monthFormat
  };

查看此演示 https://plnkr.co/edit/eV2Kmt。

参考答案-Angular-Material set a Datepicker with only months and years

【讨论】：