Angular 2 DatePicker仅包含月份和年份

Question

我目前正在使用https://github.com/kekeh/mydatepicker作为我的Angular 2应用程序的日期选择器.我想要一个日期选择器,它只显示角度为2的月份和年份.是否有人知道如何操作.我尝试角度2的Jquery,但没有成功.

Answer 1

一个月选取器

import { Component } from '@angular/core';
import {Month} from './month';

@Component({
    selector: 'month-picker',

    template: `
    <div>

    <div class="col-xs-2">      
    <select class="form-control"  required>
            <option  *ngFor="let p of months"  [selected]="mm === p.val ">{{p.name}}</option>    
    </select>
    </div>

    </div>`
})

export class MonthPicker implements OnInit {

private mm : string ;
months = [
        { val: '01'  name: 'Jan' },
        { val: '02'  name: 'Feb' },
        { val: '03'  name: 'Mar' },
        { val: '04'  name: 'Apr' },
        { val: '05'  name: 'May' },
        { val: '06'  name: 'Jun' },
        { val: '07'  name: 'Jul' },
        { val: '08'  name: 'Aug' },
        { val: '09'  name: 'Sep' },
        { val: '10'  name: 'Oct' },
        { val: '11'  name: 'Nov' },
        { val: '12'  name: 'Dec' }
    ];

    ngOnInit() {  this.getMonth(); 

    }  

    getMonth(){
    var today = new Date();
    this.mm = today.getMonth()+1;     
    if(this.mm<10) {
    this.mm='0'+this.mm        
        }
    }




}

month.ts

export class Month {  
    private val: string;
    private name: string;
}

YearPicker

import { Component } from '@angular/core';

@Component({
    selector: 'year-picker',

    template: `
    <div>

    <div class="col-xs-2">      
    <select class="form-control"  required>
            <option  *ngFor="let y of years"  [selected]="yy === y ">{{y}}</option>    
    </select>
    </div>

    </div>`
})

export class YearPicker implements OnInit {


private years: number[] =[];
private yy : number;

    ngOnInit() { 
    this.getYear();

    }  

     getYear(){
        var today = new Date();
        this.yy = today.getFullYear();        
        for(var i = (this.yy-100); i <= this.yy; i++){
        this.years.push(i);}
    }


}

在我的应用程序组件Html中我使用

<month-picker (change)="onMonthChange($event.target.value)"> </month-picker>
<year-picker (change)="onYearChange($event.target.value)"></year-picker>