Fix datepicker startingday

src/modules/datepicker/datepicker-input.directive.ts

@@ -76,6 +76,9 @@ export class SkyDatepickerInputDirective implements
   @Input()
   public maxDate: Date;
 
+  @Input()
+  public startingDay: number;
+
   private dateFormatter = new SkyDateFormatter();
 
   private modelValue: Date;
@@ -118,6 +121,11 @@ export class SkyDatepickerInputDirective implements
       this._validatorChange();
       this.skyDatepickerInput.setMaxDate(this.maxDate);
     }
+
+    if (changes['startingDay']) {
+      this._validatorChange();
+      this.skyDatepickerInput.setStartingDay(this.startingDay);
+    }
   }
 
   @HostListener('change', ['$event'])

src/modules/datepicker/datepicker.component.html

@@ -12,7 +12,8 @@
             (selectedDateChange)="dateSelected($event)"
             (calendarModeChange)="onCalendarModeChange()"
             [maxDate]="maxDate"
-            [minDate]="minDate">
+            [minDate]="minDate"
+            [startingDay]="startingDay">
           </sky-datepicker-calendar>
         </sky-dropdown-menu>
       </sky-dropdown>

src/modules/datepicker/datepicker.component.spec.ts

@@ -634,6 +634,22 @@ describe('datepicker', () => {
 
         expect(dateButtonEl).toHaveCssClass('sky-btn-disabled');
       }));
+
+      it('should pass starting day to calendar', fakeAsync(() => {
+        component.selectedDate = new Date('5/21/2017');
+        component.startingDay = 5;
+        fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
+
+        openDatepicker(fixture.nativeElement, fixture);
+        tick();
+
+        let firstDayCol = fixture.nativeElement
+          .querySelectorAll('.sky-datepicker-center.sky-datepicker-weekdays').item(0) as HTMLElement;
+
+        expect(firstDayCol.textContent).toContain('Fr');
+      }));
     });
   });
 

src/modules/datepicker/datepicker.component.ts

@@ -28,6 +28,7 @@ export class SkyDatepickerComponent {
 
   public dropdownController = new Subject<SkyDropdownMessage>();
   public dateChanged: EventEmitter<Date> = new EventEmitter<Date>();
+  public startingDay: number;
   public maxDate: Date;
   public minDate: Date;
 
@@ -50,6 +51,10 @@ export class SkyDatepickerComponent {
     this.maxDate = _maxDate;
   }
 
+  public setStartingDay(_startingDay: number) {
+    this.startingDay = _startingDay;
+  }
+
   public onCalendarModeChange() {
     this.dropdownController.next({
       type: SkyDropdownMessageType.Reposition

src/modules/datepicker/fixtures/datepicker.component.fixture.html

@@ -1,11 +1,13 @@
 <div>
-  <sky-datepicker #picker>
+  <sky-datepicker
+    #picker>
     <input
       name="myDate"
       [(ngModel)]="selectedDate"
       [skyDatepickerInput]="picker"
       [minDate]="minDate"
       [maxDate]="maxDate"
+      [startingDay]="startingDay"
       [dateFormat]="format"
       [skyDatepickerNoValidate]="noValidate"
       #date="ngModel" />

src/modules/datepicker/fixtures/datepicker.component.fixture.ts

@@ -14,4 +14,5 @@ export class DatepickerTestComponent {
 
   public format: string = 'MM/DD/YYYY';
   public noValidate: boolean = false;
+  public startingDay = 0;
 }