feat(datepicker): initial version of datepicker component

demo/src/app/app.routing.ts

@@ -7,6 +7,7 @@ import {
   NgbdButtons,
   NgbdCarousel,
   NgbdCollapse,
+  NgbdDatepicker,
   NgbdDropdown,
   NgbdModal,
   NgbdPagination,
@@ -29,6 +30,7 @@ const routes: Routes = [
   {path: 'components/buttons', component: NgbdButtons},
   {path: 'components/carousel', component: NgbdCarousel},
   {path: 'components/collapse', component: NgbdCollapse},
+  {path: 'components/datepicker', component: NgbdDatepicker},
   {path: 'components/dropdown', component: NgbdDropdown},
   {path: 'components/modal', component: NgbdModal},
   {path: 'components/pagination', component: NgbdPagination},

demo/src/app/components/datepicker/datepicker.component.ts

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {DEMO_SNIPPETS} from './demos';
+
+@Component({
+  selector: 'ngbd-datepicker',
+  template: `
+    <ngbd-content-wrapper component="Datepicker">
+      <ngbd-api-docs directive="NgbDatepicker"></ngbd-api-docs>
+      <ngbd-example-box demoTitle="Basic datepicker" [htmlSnippet]="snippets.basic.markup" [tsSnippet]="snippets.basic.code">
+        <ngbd-datepicker-basic></ngbd-datepicker-basic>
+      </ngbd-example-box>
+    </ngbd-content-wrapper>
+  `
+})
+export class NgbdDatepicker {
+   snippets = DEMO_SNIPPETS;
+}

demo/src/app/components/datepicker/demos/basic/datepicker-basic.html

@@ -0,0 +1,13 @@
+<p>Simple datepicker</p>
+
+<ngb-datepicker #dp [(ngModel)]="model" [minDate]="minDate" [maxDate]="maxDate"></ngb-datepicker>
+
+<hr/>
+
+<button class="btn btn-sm btn-outline-primary" (click)="selectToday()">Select Today</button>
+<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo()">To current month</button>
+<button class="btn btn-sm btn-outline-primary" (click)="dp.navigateTo({year: 2013, month: 1})">To Feb 2013</button>
+
+<hr/>
+
+<pre>Model: {{ model | json }}</pre>

demo/src/app/components/datepicker/demos/basic/datepicker-basic.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+
+const now = new Date();
+
+@Component({
+  selector: 'ngbd-datepicker-basic',
+  template: require('./datepicker-basic.html')
+})
+export class NgbdDatepickerBasic {
+
+  model;
+
+  minDate = {year: 2000, month: 0, date: 7};
+  maxDate = {year: 2020, month: 5, date: 15};
+
+  selectToday() {
+    this.model = {year: now.getFullYear(), month: now.getMonth(), date: now.getDate()};
+  }
+}

demo/src/app/components/datepicker/demos/index.ts

@@ -0,0 +1,9 @@
+import {NgbdDatepickerBasic} from './basic/datepicker-basic';
+
+export const DEMO_DIRECTIVES = [NgbdDatepickerBasic];
+
+export const DEMO_SNIPPETS = {
+  basic: {
+    code: require('!!prismjs?lang=typescript!./basic/datepicker-basic'),
+    markup: require('!!prismjs?lang=markup!./basic/datepicker-basic.html')}
+};

demo/src/app/components/datepicker/index.ts

@@ -0,0 +1,14 @@
+export * from './datepicker.component';
+
+import {NgModule} from '@angular/core';
+import {NgbdSharedModule} from '../../shared';
+import {NgbdComponentsSharedModule} from '../shared';
+import {NgbdDatepicker} from './datepicker.component';
+import {DEMO_DIRECTIVES} from './demos';
+
+@NgModule({
+  imports: [NgbdSharedModule, NgbdComponentsSharedModule],
+  exports: [NgbdDatepicker],
+  declarations: [NgbdDatepicker, ...DEMO_DIRECTIVES]
+})
+export class NgbdDatepickerModule {}

demo/src/app/components/index.ts

@@ -1,8 +1,10 @@
+import {NgbdDatepickerModule} from './datepicker/index';
 export * from './accordion';
 export * from './alert';
 export * from './buttons';
 export * from './carousel';
 export * from './collapse';
+export * from './datepicker';
 export * from './dropdown';
 export * from './modal';
 export * from './pagination';
@@ -42,6 +44,7 @@ import {NgbdTypeaheadModule} from './typeahead';
     NgbdButtonsModule,
     NgbdCarouselModule,
     NgbdCollapseModule,
+    NgbdDatepickerModule,
     NgbdDropdownModule,
     NgbdModalModule,
     NgbdPaginationModule,
@@ -59,6 +62,7 @@ import {NgbdTypeaheadModule} from './typeahead';
     NgbdButtonsModule,
     NgbdCarouselModule,
     NgbdCollapseModule,
+    NgbdDatepickerModule,
     NgbdDropdownModule,
     NgbdModalModule,
     NgbdPaginationModule,

demo/src/app/shared/side-nav/side-nav.component.ts

@@ -11,6 +11,7 @@ export class SideNavComponent {
     'Buttons',
     'Carousel',
     'Collapse',
+    'Datepicker',
     'Dropdown',
     'Modal',
     'Pagination',

src/datepicker/datepicker-day-view.spec.ts

@@ -0,0 +1,81 @@
+import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {createGenericTestComponent} from '../util/tests';
+
+import {Component} from '@angular/core';
+
+import {NgbDatepickerModule} from './datepicker.module';
+import {MonthViewModel, DayViewModel} from './datepicker-view-model';
+import {NgbDatepickerDayView} from './datepicker-day-view';
+import {NgbDate} from './ngb-date';
+
+const createTestComponent = (html: string) =>
+    createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+
+function getElement(element: HTMLElement): HTMLElement {
+  return <HTMLElement>element.querySelector('[ngb-datepicker-day-view]');
+}
+
+describe('ngb-datepicker-day-view', () => {
+
+  beforeEach(() => {
+    TestBed.overrideModule(NgbDatepickerModule, {set: {exports: [NgbDatepickerDayView]}});
+    TestBed.configureTestingModule({declarations: [TestComponent], imports: [NgbDatepickerModule]});
+  });
+
+  it('should display date', () => {
+    const fixture =
+        createTestComponent('<div ngb-datepicker-day-view [day]="day" [month]="month" [selected]="selected"></div>');
+
+    const el = getElement(fixture.nativeElement);
+    expect(el.innerText).toBe('22');
+
+    fixture.componentInstance.day.date = new NgbDate(2016, 7, 25);
+    fixture.detectChanges();
+    expect(el.innerText).toBe('25');
+  });
+
+  it('should apply text-muted style for disabled days', () => {
+    const fixture =
+        createTestComponent('<div ngb-datepicker-day-view [day]="day" [month]="month" [selected]="selected"></div>');
+
+    const el = getElement(fixture.nativeElement);
+    expect(el).not.toHaveCssClass('text-muted');
+
+    fixture.componentInstance.day.disabled = true;
+    fixture.detectChanges();
+    expect(el).toHaveCssClass('text-muted');
+  });
+
+  it('should apply text-muted style for days of a different month', () => {
+    const fixture =
+        createTestComponent('<div ngb-datepicker-day-view [day]="day" [month]="month" [selected]="selected"></div>');
+
+    const el = getElement(fixture.nativeElement);
+    expect(el).not.toHaveCssClass('text-muted');
+
+    fixture.componentInstance.day.date = new NgbDate(2016, 8, 22);
+    fixture.detectChanges();
+    expect(el).toHaveCssClass('text-muted');
+  });
+
+  it('should apply selected style', () => {
+    const fixture =
+        createTestComponent('<div ngb-datepicker-day-view [day]="day" [month]="month" [selected]="selected"></div>');
+
+    const el = getElement(fixture.nativeElement);
+    expect(el).not.toHaveCssClass('bg-primary');
+
+    fixture.componentInstance.selected = true;
+    fixture.detectChanges();
+    expect(el).toHaveCssClass('bg-primary');
+  });
+});
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+  day: DayViewModel = {date: new NgbDate(2016, 7, 22), disabled: false};
+
+  selected = false;
+
+  month: MonthViewModel = {year: 2016, number: 7, weekdays: [0], weeks: []};
+}

src/datepicker/datepicker-day-view.ts

@@ -0,0 +1,20 @@
+import {Component, Input} from '@angular/core';
+import {MonthViewModel, DayViewModel} from './datepicker-view-model';
+
+@Component({
+  selector: '[ngb-datepicker-day-view]',
+  styles: [`
+    :host {      
+      text-align: center;
+      padding: 0.185rem 0.25rem;      
+      border-radius: 0.25rem;
+    }
+  `],
+  host: {'[class.bg-primary]': 'selected', '[class.text-muted]': 'day.date.month !== month.number || day.disabled'},
+  template: `{{ day.date.date }}`
+})
+export class NgbDatepickerDayView {
+  @Input() month: MonthViewModel;
+  @Input() day: DayViewModel;
+  @Input() selected: boolean;
+}

src/datepicker/datepicker-i18n.spec.ts

@@ -0,0 +1,21 @@
+import {NgbDatepickerI18n} from './datepicker-i18n';
+
+describe('ngb-datepicker-i18n', () => {
+
+  it('should return month name', () => {
+    const i18n = new NgbDatepickerI18n();
+
+    expect(i18n.getMonthName(0)).toBe('Jan');
+    expect(i18n.getMonthName(11)).toBe('Dec');
+    expect(i18n.getMonthName(12)).toBe(undefined);
+  });
+
+  it('should return weekday name', () => {
+    const i18n = new NgbDatepickerI18n();
+
+    expect(i18n.getWeekdayName(0)).toBe('Su');
+    expect(i18n.getWeekdayName(6)).toBe('Sa');
+    expect(i18n.getWeekdayName(7)).toBe(undefined);
+  });
+
+});

src/datepicker/datepicker-i18n.ts

@@ -0,0 +1,11 @@
+import {Injectable} from '@angular/core';
+
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+@Injectable()
+export class NgbDatepickerI18n {
+  getWeekdayName(weekday: number): string { return WEEKDAYS[weekday]; }
+
+  getMonthName(month: number): string { return MONTHS[month]; }
+}