Angular-Material set a Datepicker with only months and years

问题

I'm using angular 1.5.9 & angular material design 1.1.1

I would like to add a Datepicker with months and years only, no days, it's for a credit card expiration field in a checkout form.

回答1:

You can set md-mode="month" working demo below

   <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>
    </md-input-container>

DEMO

回答2:

Knowing, that md-mode="month" isn't working in latest versions, like 7.3.7, i have other solution. First in your component HTML put this (includes input for showing selected month + input which will be hidden, but needed for mat-datepicker):

<input type="text" matInput [matDatepicker]="picker">
<input class="form-control" [(ngModel)]="pickerDate" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="pickerDate" (monthSelected)="closeDatePicker($event)"></mat-datepicker>

Then in your ts file put these lines:

private pickerDate;
@ViewChild('picker') datePicker: MatDatepicker<any>;

closeDatePicker(event) {
    this.pickerDate = moment(event).format('YYYY-MM');
    this.datePicker.close();
}

And that's it. Inputs now should work. Also i used this css for hidden input hiding:

input[matinput] {
    position: absolute;
    width: 0px;
    border: none;
    height: 100%;
}

Keep in mind, that you shouldn't use hidden on matInput, else datepicker popup will show in wrong position. If you use my css, keep in mind, that matInput parent should have position: relative!

回答3:

For Angular Material datepicker with month and years --

app.js

var app = angular.module('plunker', ['ngMaterial']);

app.controller('MainCtrl', function($scope) {

  var monthFormat =  buildLocaleProvider("MMM-YYYY");

    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 = [ 
                {
                    type: 'date',
                    required: false,
                    binding: 'applicant.expectedGraduation',
                    startView: 'month',
                    label: 'Credit Card Expiry - Year/Month picker',
                    mode: 'month',
                    locale: monthFormat
                }
    ];
});

index.html

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS material-sidenav Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="https://static.formhero.io/formhero/js/material/v1.1.1-fh-build/angular-material.min.css">
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="https://static.formhero.io/formhero/js/material/v1.1.1-fh-build/angular-material.min.js"></script>
  <script src="app.js"></script>
</head>

<body layout="row" layout-wrap flex layout-fill layout-align="start start" ng-controller="MainCtrl">

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

</html>

For a demonstration use below link-- https://plnkr.co/edit/zXhgq3?p=preview

回答4:

I solved it using the documentation here for angular 8.

Don't forget to set the formControl with a Moment, for ex: this.monthlyResportDateFormControl = new FormControl(moment(this.monthlyReportDate))

Getting the value into chosenMonthHandler I did it with this.monthlyReportDate = this.monthlyResportDateFormControl.value.toDate()

来源：https://stackoverflow.com/questions/40991798/angular-material-set-a-datepicker-with-only-months-and-years

标签

angularjs

angular-material