MD Datepicker shows the full date after selecting Month and year from month and year calendar mode

Question

I am using Material Design and had to display the month and year only. So I used the month mode. But now when a user select a year and month, the whole date is visible for example if i had selected February 2019 from the datepicker, it would display that you selected 01/02/2019. Instead we want just Feb-2019.

This is my html md code

<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>

What shall i edit in order to just get the month and year after selection?

Answer 1

you can make use of moment js for formatting date as you wanted,

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
  };

Look into this demo https://plnkr.co/edit/eV2Kmt .

Reference answer - Angular-Material set a Datepicker with only months and years