fix(datepicker): empty month select box when 'displayMonths' > 1

The list of months and years was generated from the focused date rather
than the first displayed date, which was inconsistent with the value used
in the datepicker navigation component, which uses the first displayed date.
This inconsistency was not visible when displayMonths = 1 but it sometimes
caused the following issue when several months were displayed:
the month select box was empty as it did not contain the currently displayed
month.

Fixes #2377
Closes #2452

src/datepicker/datepicker-service.spec.ts

@@ -612,6 +612,16 @@ describe('ngb-datepicker-service', () => {
         expect(model.selectBoxes.months).toEqual([1, 2, 3, 4, 5, 6, 7]);
       });
 
+      it(`should generate 'months' based on the first date, not the focus date`, () => {
+        service.displayMonths = 2;
+        service.maxDate = new NgbDate(2017, 1, 11);
+        service.open(new NgbDate(2017, 1, 1));
+        expect(model.selectBoxes.months).toEqual([1]);
+
+        service.open(new NgbDate(2016, 12, 1));
+        expect(model.selectBoxes.months).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
+      });
+
       it(`should rebuild 'months' and 'years' only when year change`, () => {
         service.focus(new NgbDate(2010, 5, 1));
         let months = model.selectBoxes.months;

src/datepicker/datepicker-service.ts

@@ -263,13 +263,13 @@ export class NgbDatepickerService {
       if (state.navigation === 'select') {
         // years ->  boundaries (min/max were changed)
         if ('minDate' in patch || 'maxDate' in patch || state.selectBoxes.years.length === 0 || yearChanged) {
-          state.selectBoxes.years = generateSelectBoxYears(state.focusDate, state.minDate, state.maxDate);
+          state.selectBoxes.years = generateSelectBoxYears(state.firstDate, state.minDate, state.maxDate);
         }
 
         // months -> when current year or boundaries change
         if ('minDate' in patch || 'maxDate' in patch || state.selectBoxes.months.length === 0 || yearChanged) {
           state.selectBoxes.months =
-              generateSelectBoxMonths(this._calendar, state.focusDate, state.minDate, state.maxDate);
+              generateSelectBoxMonths(this._calendar, state.firstDate, state.minDate, state.maxDate);
         }
       } else {
         state.selectBoxes = {years: [], months: []};