我目前正在使用https://github.com/kekeh/mydatepicker作为Angular 2应用程序的日期选择器。我想要一个日期选择器，它只显示角度为2的月份和年份。是否有人知道如何操作。我尝试角度2的Jquery，但没有成功。
答案 0 :(得分：6)
月拾取器
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>
答案 1 :(得分：1)
在你的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>
答案 2 :(得分：0)
试试这个https://musthaan.com/2017/08/28/month-picker-in-angular-2/
import { Component, OnInit, Input, OnChanges, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';<span data-mce-type="bookmark" id="mce_SELREST_start" data-mce-style="overflow:hidden;line-height:0" style="overflow:hidden;line-height:0" ></span>
@Component({
moduleId: module.id,
selector: 'app-month-picker',
templateUrl: 'monthPicker.html'
})
export class monthPickerDirective implements OnInit, OnChanges {
@Input() model: string|Date;
@Input() config: ImonthPickerConfig;
@Output() modelChange = new EventEmitter();
__monthPicker: monthPicker;
constructor(private _elementRef: ElementRef) {
this.__monthPicker = new monthPicker();
}
ngOnInit() {
}
ngOnChanges(changes:any) {
if (this.model) {
this.__monthPicker.setCurrentdate(new Date(this.model));
}
}
onCalendarIconClick() {
this.switchToMonthMode();
this.__monthPicker.setCurrentdate(this.model ? new Date(this.model):new Date());
this.__monthPicker.toggleState();
}
switchToYearMode() {
this.__monthPicker.viewMode = 'y';
this.__monthPicker.fillYearsInSelectionList();
}
switchToMonthMode() {
this.__monthPicker.viewMode = 'm';
this.__monthPicker.fillMonthsInSelectionList();
}
onselectionItemClick(item: IDatePickerSelectionItem) {
if (item.type == 'y') {
this.__monthPicker.displayYear = item.value;
this.switchToMonthMode();
} else if (item.type == 'm') {
this.onSelectMonth(item);
}
}
onSelectMonth(item: IDatePickerSelectionItem) {
this.__monthPicker.displayMonth = item.text;
this.__monthPicker.displayMonthIndex = item.value;
this.__monthPicker.selectedMonth = item.text;
this.__monthPicker.selectedMonthIndex = item.value;
this.__monthPicker.selectedYear = this.__monthPicker.displayYear;
this.model = (this.__monthPicker.selectedMonthIndex + 1) + "/01/" + this.__monthPicker.selectedYear;
//this.model = new Date(this.__monthPicker.selectedYear, this.__monthPicker.selectedMonthIndex, 1);
this.__monthPicker.state = "closed";
this.modelChange.next(this.model);
}
onPrevYearSelection() {
this.__monthPicker.displayYear--;
if (this.__monthPicker.viewMode == 'y') { this.__monthPicker.fillYearsInSelectionList(); }
}
onNextYearSelection() {
this.__monthPicker.displayYear++;
if (this.__monthPicker.viewMode == 'y') { this.__monthPicker.fillYearsInSelectionList(); }
}
onCancel() {
this.__monthPicker.state = "closed";
}
@HostListener('document:click', ['$event', '$event.target'])
public onClick(event: MouseEvent, targetElement: HTMLElement): void {
if (!targetElement) {
return;
}
const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.__monthPicker.state = "closed";
}
}
}
export interface ImonthPickerConfig {
readonly?: boolean;
cssClass?: string;
placeHolder?: string;
}
export interface IDatePickerSelectionItem {
text: string;
value: number;
type: string;
}
class monthPicker {
state: string;
selectionItems: Array<IDatePickerSelectionItem>;
selectedMonth: string;
selectedMonthIndex: number;
selectedYear: number;
displayMonth: string;
displayMonthIndex: number;
displayYear: number;
viewMode: string;
private months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
constructor() {
this.state = "closed";
this.viewMode = 'm';
this.fillMonthsInSelectionList();
let currentDate = new Date();
this.setCurrentdate(currentDate);
}
toggleState() {
this.state = this.state == "closed" ? "open" : "closed";
}
fillMonthsInSelectionList() {
this.selectionItems = [];
this.months.forEach((v: string, i: number) => this.selectionItems.push({ text: v, value: i, type: 'm' }));
}
fillYearsInSelectionList() {
this.selectionItems = [];
for (let start = this.displayYear - 6; start <= this.displayYear + 5; start++) {
this.selectionItems.push({ text: start.toString(), value: start, type: 'y' });
}
}
setCurrentdate(currentDate: Date)
{
this.displayMonth = this.months[(currentDate.getMonth() - 1)];
this.displayMonthIndex = currentDate.getMonth();
this.displayYear = currentDate.getFullYear();
this.selectedMonth = this.displayMonth;
this.selectedMonthIndex = this.displayMonthIndex;
this.selectedYear = this.displayYear;
}
}
HTML模板
<div class="input-group fdms-mp-input">
<input type="text" readonly value="{{model|date: 'MM/yyyy'}}" class="form-control" placeholder="{{config.placeHolder}}" />
<span class="input-group-addon" (click)="onCalendarIconClick()"><i class="fa fa-calendar"></i></span>
<div class="fdms-month-picker" *ngIf="__monthPicker.state=='open'">
<div class="col-md-12 d-title">{{__monthPicker.selectedMonth}}, {{__monthPicker.selectedYear}}</div>
<div class="col-md-12 d-nav">
<div class="col-md-3"><span (click)="onPrevYearSelection()"><</span></div>
<div class="col-md-6"><span (click)="switchToYearMode()">{{__monthPicker.displayYear}}</span></div>
<div class="col-md-3"><span (click)="onNextYearSelection()">></span></div>
</div>
<div class="col-md-12 d-selection-wraper">
<div class="col-md-3 d-selection-item" *ngFor="let item of __monthPicker.selectionItems">
<span (click)="onselectionItemClick(item)">{{item.text}}</span></div>
</div>
<div class="col-md-12 d-actions">
<span class="d-action d-action-cancel" (click)="onCancel()">Cancel</span></div>
</div>
</div>