Question

我使用角1.5.9＆amp;角材料设计1.1.1

我想在结帐表单中添加一个只有月份和年份的Datepicker，没有天，它是信用卡到期字段。

Answer 1

您可以在下面设置md-mode="month"工作演示

   <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

Answer 2

对于具有月份和年份的Angular Material日期选择器-

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>

要进行演示，请使用以下链接- https://plnkr.co/edit/zXhgq3?p=preview

Answer 3

知道md-mode="month"在最新版本（如7.3.7）中不起作用，我有其他解决方案。首先在您的组件HTML中放置此内容（包括用于显示所选月份的输入+将被隐藏，但对于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>

然后在您的ts文件中放置以下行：

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

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

就是这样。输入现在应该可以使用。我也使用此CSS进行隐藏的输入隐藏：

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

请记住，您不应该在matInput上使用hidden，否则datepicker弹出窗口将显示在错误的位置。如果您使用我的CSS，请记住，该matInput父级应具有position: relative！

Answer 4

我使用documentation here解决了角度8 。

别忘了将formControl设置为矩，例如this.monthlyResportDateFormControl = new FormControl(moment(this.monthlyReportDate))

将值获取到chosenMonthHandler是用this.monthlyReportDate = this.monthlyResportDateFormControl.value.toDate()

Angular-Material设置了一个只有几个月和几年的Datepicker

4 个答案: