我正在使用 angular 1.5.9 和 angular material design 1.1.1
我想添加一个只有月份和年份的日期选择器，没有日期，它用于结帐表单中的信用卡到期字段。
【问题讨论】：
标签： angularjs angular-material
您可以在下面设置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>
【讨论】：
md-mode="month" inline 放在代码 sn-p 中而不是作为变量？我认为它可能更清楚
md-mode="{{dateFields[2].mode}}"。如果它是一个简单的使用而不是变量基，它可能更容易被人们理解
知道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！
【讨论】：
对于带有月份和年份的 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
【讨论】：
我使用 angular 8 的 documentation here 解决了这个问题。
不要忘记用 Moment 设置 formControl，例如：this.monthlyResportDateFormControl = new FormControl(moment(this.monthlyReportDate))
将值输入chosenMonthHandler 我是用this.monthlyReportDate = this.monthlyResportDateFormControl.value.toDate() 完成的
【讨论】：