CODEWITHSUNDEEP
angularjsangular-material
Shlomi Atia
Shlomi Atia

Reputation: 105

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.

Upvotes: 4

Views: 19336

Answers (4)

Pipo
Pipo

Reputation: 5073

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

Upvotes: 0

Andris
Andris

Reputation: 4193

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!

Upvotes: 2

Kshitij
Kshitij

Reputation: 380

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

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222542

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

Upvotes: 2

Related Questions