Angular-Material 设置了一个只有几个月和几年的日期选择器 [英] Angular-Material set a Datepicker with only months and years

问题描述

我使用的是 angular 1.5.9 &角度材料设计 1.1.1

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.

推荐答案

知道 md-mode="month" 在最新版本中不起作用，例如 7.3.7，我还有其他解决方案.首先在您的组件 HTML 中输入此内容(包括用于显示所选月份的输入 + 将被隐藏但需要用于 mat-datepicker 的输入):

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>

然后在你的 ts 文件中加入这些行:

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

就是这样.输入现在应该可以工作了.我也用这个 css 来隐藏输入:

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

请记住，您不应该在 matInput 上使用 hidden ，否则日期选择器弹出窗口将显示在错误的位置.如果您使用我的 css，请记住，matInput 父级应该具有 position:relative!

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!

这篇关于Angular-Material 设置了一个只有几个月和几年的日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！