angular2中的月份和年份选择器

时间:2018-10-12 06:35:04

标签: angular angular2-forms

我是angular2,4的初学者。我冲浪月-月日期选择器。如果有人建议我angular4支持的月-月日期选择器。请帮助我

1 个答案:

答案 0 :(得分:0)

运行

npm install ng2-datepicker --save

然后在您的根模块中:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgDatepickerModule } from 'ng2-datepicker';

@NgModule({
  imports: [
    BrowserModule,
    NgDatepickerModule
  ],
  declarations: [ AppComponent ],
  exports: [ AppComponent ]
})
export class AppModule {}

或者您可以使用此date picker directive

月份年份日期选择器

在您的component.ts中,

  months;
  years = [];

  getDates() {
    var date = new Date();
    var currentYear = date.getFullYear();

    //set values for year dropdown
    for (var i = 0; i <= 100; i++) {
      this.years.push(currentYear + i);
    }

    //set values for month dropdown
    this.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  }

在您的component.html

<select name="month" formControlName="monthName">
    <option *ngFor="let month of months" [ngValue]="month">
      {{month}}
    </option>
  </select>
  <select name="year" formControlName="year">
    <option *ngFor="let year of years" [ngValue]="year">
      {{year}}
    </option>
</select>