issue #163, added a year selector

Author: allenhwkim

src/ng2-datetime-picker.component.ts

@@ -12,32 +12,22 @@ import {Ng2Datetime} from './ng2-datetime';
 
 declare var moment: any;
 
-//@TODO
-// . display currently selected day
-
-/**
- * show a selected date in monthly calendar
- */
-@Component({
- providers : [Ng2Datetime],
- selector : 'ng2-datetime-picker',
- template : `
-<div class="closing-layer" (click)="close()" *ngIf="showCloseLayer" ></div>
-<div class="ng2-datetime-picker">
- <div class="close-button" *ngIf="showCloseButton" (click)="close()"></div>
- 
- <!-- Month - Year -->
+let monthYearHTML: string = `
  <div class="month" *ngIf="!timeOnly">
  <b class="prev_next prev year" (click)="updateMonthData(-12)">&laquo;</b>
  <b class="prev_next prev month" (click)="updateMonthData(-1)">&lsaquo;</b>
  <span title="{{monthData?.fullName}}">
- {{monthData?.shortName}}
+ {{monthData?.shortName}}
+ </span>
+ <span (click)="showYearSelector = true">
+ {{monthData.year}}
  </span>
- {{monthData.year}}
  <b class="prev_next next year" (click)="updateMonthData(+12)">&raquo;</b>
  <b class="prev_next next month" (click)="updateMonthData(+1)">&rsaquo;</b>
  </div>
+`;
 
+let daysHTML: string = `
  <div class="week-numbers-and-days"
  [ngClass]="{'show-week-numbers': !timeOnly && showWeekNumbers}">
  <!-- Week -->
@@ -90,12 +80,9 @@ declare var moment: any;
  </div>
  </div>
  </div>
+`;
 
- <div class="shortcuts" *ngIf="showTodayShortcut">
- <a href="#" (click)="selectToday()">Today</a>
- </div>
-
- <!-- Time -->
+let timeHTML: string = `
  <div class="time" id="time" *ngIf="!dateOnly">
  <div class="select-current-time" (click)="selectCurrentTime()">{{locale.currentTime}}</div>
  <label class="timeLabel">{{locale.time}}</label>
@@ -121,6 +108,50 @@ declare var moment: any;
  type="range" min="0" max="59" range="10" [(ngModel)]="minute"/>
  </div>
  </div>
+`;
+
+let yearSelectorHTML: string = `
+ <div class="year-selector" *ngIf="showYearSelector">
+ <div class="locale">
+ <b>{{locale.year}}</b>
+ </div>
+ <span class="year" 
+ *ngFor="let year of yearsSelectable"
+ (click)="selectYear(year)">
+ {{year}}
+ </span>
+ </div>
+`;
+
+//@TODO
+// . display currently selected day
+
+/**
+ * show a selected date in monthly calendar
+ */
+@Component({
+ providers : [Ng2Datetime],
+ selector : 'ng2-datetime-picker',
+ template : `
+<div class="closing-layer" (click)="close()" *ngIf="showCloseLayer" ></div>
+<div class="ng2-datetime-picker">
+ <div class="close-button" *ngIf="showCloseButton" (click)="close()"></div>
+ 
+ <!-- Month - Year -->
+ ${monthYearHTML}
+
+ <!-- Week number / Days -->
+ ${daysHTML}
+
+ <div class="shortcuts" *ngIf="showTodayShortcut">
+ <a href="#" (click)="selectToday()">Today</a>
+ </div>
+
+ <!-- Hour Minute -->
+ ${timeHTML}
+
+ <!-- Year Selector -->
+ ${yearSelectorHTML}
 </div>
  `,
  styles : [
@@ -270,6 +301,27 @@ declare var moment: any;
  padding: 10px;
  text-transform: Capitalize;
 }
+.ng2-datetime-picker .year-selector {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: #fff;
+ height: 100%;
+ overflow: auto; 
+ padding: 5px;
+ z-index: 2;
+}
+.ng2-datetime-picker .year-selector .locale{
+ text-align: center;
+}
+.ng2-datetime-picker .year-selector .year {
+ display: inline-block;
+ cursor: pointer;
+ padding: 2px 5px;
+}
+.ng2-datetime-picker .year-selector .year:hover {
+ background-color: #ddd;
+}
 .ng2-datetime-picker .select-current-time {
  position: absolute;
  top: 1em;
@@ -362,6 +414,8 @@ export class Ng2DatetimePickerComponent {
  public el:HTMLElement; // this component element
  public disabledDatesInTime: number[];
  public locale = Ng2Datetime.locale;
+ public showYearSelector = false;
+
  private _monthData: any;
 
  public constructor (
@@ -372,6 +426,16 @@ export class Ng2DatetimePickerComponent {
  this.el = elementRef.nativeElement;
  }
 
+ public get yearsSelectable(): number[] {
+ let startYear = this.year - 100;
+ let endYear = this.year + 50;
+ let years: number[] = [];
+ for (let year = startYear; year < endYear; year++) {
+ years.push(year);
+ }
+ return years;
+ }
+
  public get year(): number {
  return this.selectedDate.getFullYear();
  }
@@ -397,21 +461,11 @@ export class Ng2DatetimePickerComponent {
  return dt;
  }
 
- public isWeekend(dayNum: number, month?: number): boolean {
- if (typeof month === 'undefined') {
- return Ng2Datetime.weekends.indexOf(dayNum % 7) !== -1; //weekday index
- } else {
- let weekday = this.toDate(dayNum, month).getDay();
- return Ng2Datetime.weekends.indexOf(weekday) !== -1;
- }
- }
-
  public set year (year) {}
  public set month (month) {}
  public set day (day) {}
  public set today (today) {}
 
-
  public ngOnInit() {
  if(!this.defaultValue || isNaN(this.defaultValue.getTime())) {
  this.defaultValue = new Date();
@@ -431,6 +485,20 @@ export class Ng2DatetimePickerComponent {
  this._monthData = this.ng2Datetime.getMonthData(this.year, this.month);
  }
 
+ public isWeekend(dayNum: number, month?: number): boolean {
+ if (typeof month === 'undefined') {
+ return Ng2Datetime.weekends.indexOf(dayNum % 7) !== -1; //weekday index
+ } else {
+ let weekday = this.toDate(dayNum, month).getDay();
+ return Ng2Datetime.weekends.indexOf(weekday) !== -1;
+ }
+ }
+
+ public selectYear(year) {
+ this._monthData = this.ng2Datetime.getMonthData(year, this._monthData.month);
+ this.showYearSelector = false;
+ }
+
  public toDate (day:number, month?: number):Date {
  return new Date(this._monthData.year, month || this._monthData.month, day);
  }