feat(datepicker): add configuration class for datepicker component an…

…d use it instead of hardcoded constants

components/datepicker.ts

@@ -12,3 +12,4 @@ export { DayPickerComponent } from './datepicker/daypicker.component'
 export { MonthPickerComponent } from './datepicker/monthpicker.component'
 export { YearPickerComponent } from './datepicker/yearpicker.component'
 export { DateFormatter } from './datepicker/date-formatter'
+export { DatepickerConfig } from './datepicker/datepicker.config';

components/datepicker/datepicker-inner.component.ts

@@ -2,25 +2,8 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChange
 
 import { DateFormatter } from './date-formatter';
 
-const FORMAT_DAY = 'DD';
-const FORMAT_MONTH = 'MMMM';
-const FORMAT_YEAR = 'YYYY';
-const FORMAT_DAY_HEADER = 'dd';
-const FORMAT_DAY_TITLE = 'MMMM YYYY';
-const FORMAT_MONTH_TITLE = 'YYYY';
-const DATEPICKER_MODE = 'day';
-const MIN_MODE = 'day';
-const MAX_MODE = 'year';
-const SHOW_WEEKS = true;
-const ONLY_CURRENT_MONTH = false;
-const STARTING_DAY = 0;
-const YEAR_RANGE = 20;
-const MONTH_COL_LIMIT = 3;
-const YEAR_COL_LIMIT = 5;
 // const MIN_DATE:Date = void 0;
 // const MAX_DATE:Date = void 0;
-const SHORTCUT_PROPAGATION = false;
-
 // const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
 /*
@@ -103,27 +86,6 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
 
  // todo: add formatter value to Date object
  public ngOnInit(): void {
- this.formatDay = this.formatDay || FORMAT_DAY;
- this.formatMonth = this.formatMonth || FORMAT_MONTH;
- this.formatYear = this.formatYear || FORMAT_YEAR;
- this.formatDayHeader = this.formatDayHeader || FORMAT_DAY_HEADER;
- this.formatDayTitle = this.formatDayTitle || FORMAT_DAY_TITLE;
- this.formatMonthTitle = this.formatMonthTitle || FORMAT_MONTH_TITLE;
- this.showWeeks = (this.showWeeks === undefined
- ? SHOW_WEEKS
- : this.showWeeks);
- this.onlyCurrentMonth = (this.onlyCurrentMonth === undefined
- ? ONLY_CURRENT_MONTH
- : this.onlyCurrentMonth);
- this.startingDay = this.startingDay || STARTING_DAY;
- this.yearRange = this.yearRange || YEAR_RANGE;
- this.shortcutPropagation = this.shortcutPropagation || SHORTCUT_PROPAGATION;
- this.datepickerMode = this.datepickerMode || DATEPICKER_MODE;
- this.minMode = this.minMode || MIN_MODE;
- this.maxMode = this.maxMode || MAX_MODE;
- this.monthColLimit = this.monthColLimit || MONTH_COL_LIMIT;
- this.yearColLimit = this.yearColLimit || YEAR_COL_LIMIT;
-
  // todo: use date for unique value
  this.uniqueId = 'datepicker-' + '-' + Math.floor(Math.random() * 10000);
 
@@ -156,7 +118,7 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
  }
  }
 
- public compare(date1: Date, date2: Date): number {
+ public compare(date1: Date, date2: Date): number|undefined {
  if (date1 === undefined || date2 === undefined) {
  return undefined;
  }

components/datepicker/datepicker.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output, Self, ViewChild } from '@angular/core';
 import { DatePickerInnerComponent } from './datepicker-inner.component';
 import { ControlValueAccessor, NgModel } from '@angular/forms';
+import { DatepickerConfig } from './datepicker.config';
 
 /* tslint:disable:component-selector-name component-selector-type */
 @Component({
@@ -77,10 +78,15 @@ export class DatePickerComponent implements ControlValueAccessor {
  return this._activeDate || this._now;
  }
 
- public constructor(@Self() cd:NgModel) {
+ public constructor(@Self() cd:NgModel, protected config: DatepickerConfig) {
  this.cd = cd;
  // hack
  cd.valueAccessor = this;
+ this.configureOptions();
+ }
+
+ public configureOptions(): void {
+ Object.assign(this, this.config);
  }
 
  public set activeDate(value:Date) {

components/datepicker/datepicker.config.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DatepickerConfig {
+ public datepickerMode: string = 'day';
+ public startingDay: number = 0;
+ public yearRange: number = 20;
+ public minMode: string = 'day';
+ public maxMode: string = 'year';
+ public showWeeks: boolean = true;
+ public formatDay: string = 'DD';
+ public formatMonth: string = 'MMMM';
+ public formatYear: string = 'YYYY';
+ public formatDayHeader: string = 'dd';
+ public formatDayTitle: string = 'MMMM YYYY';
+ public formatMonthTitle: string = 'YYYY';
+ public onlyCurrentMonth: boolean = false;
+ public monthColLimit: number = 3;
+ public yearColLimit: number = 5;
+ public shortcutPropagation: boolean = false;
+}

components/datepicker/datepicker.module.ts

@@ -8,14 +8,15 @@ import { DayPickerComponent } from './daypicker.component';
 import { MonthPickerComponent } from './monthpicker.component';
 import { YearPickerComponent } from './yearpicker.component';
 import { ComponentsHelper } from '../utils/components-helper.service';
+import { DatepickerConfig } from './datepicker.config';
 
 @NgModule({
  imports: [CommonModule, FormsModule],
  declarations: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent,
  MonthPickerComponent, YearPickerComponent],
  exports: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, FormsModule,
  MonthPickerComponent, YearPickerComponent],
- providers: [ComponentsHelper]
+ providers: [ComponentsHelper, DatepickerConfig]
 })
 export class DatepickerModule {
 }