if unlinked calendar default last datePicker to the end date when opening

Author: Maxie42

libs/doc-pages/datepicker/src/lib/demos/unlinked-calendar-views/unlinked-calendar-views.component.html

@@ -4,7 +4,8 @@
            placeholder="Daterangepicker"
            class="form-control"
            bsDaterangepicker
-           [bsConfig]="{unlinkedCalendars: true}"
+           [(bsValue)]="dateRangePickerValue"
+           [bsConfig]="{unlinkedCalendars: true, displayMonths: 2}"
     >
   </div>
 </div>

libs/doc-pages/datepicker/src/lib/demos/unlinked-calendar-views/unlinked-calendar-views.component.ts

@@ -7,4 +7,10 @@ import { Component } from '@angular/core';
   standalone: false
 })
 export class UnlinkedCalendarsComponent {
+  dateRangePickerValue?: (Date | undefined)[];
+  range1: Date = new Date(2020, 5, 10);
+  range2: Date = new Date(2022, 8, 10);
+  ngOnInit(): void {
+    this.dateRangePickerValue = [this.range1, this.range2];
+  }
 }

src/datepicker/reducer/bs-datepicker.reducer.ts

@@ -240,7 +240,7 @@ function calculateReducer(state: BsDatepickerState): BsDatepickerState {
     if (checkedMode === 'day' && state.monthViewOptions != null) {
       if (calendarIndex == 0) {
         if (!state.unlinkedCalendars && state.showPreviousMonth && state.selectedRange && state.selectedRange.length === 0) {
-        viewDate = shiftDate(viewDate, { month: -1 });
+          viewDate = shiftDate(viewDate, { month: -1 });
         }
         state.monthViewOptions.firstDayOfWeek = getLocale(state.locale).firstDayOfWeek();
       }
@@ -255,6 +255,9 @@ function calculateReducer(state: BsDatepickerState): BsDatepickerState {
           state.monthViewOptions
         );
       } else {
+        if(calendarIndex == displayMonths -1 && state.unlinkedCalendars && (state.selectedRange ?? []).length == 2) {
+          viewDate = state.selectedRange![1];
+        }
         monthsModel[calendarIndex] = calcDaysCalendar(
           viewDate,
           state.monthViewOptions

src/datepicker/themes/bs/bs-datepicker-view.html

@@ -20,10 +20,6 @@
             (onSelect)="daySelectHandler($event, idx)">
           </bs-days-calendar-view>
         </div>
-        <div *ngIf="withTimepicker" class="bs-timepicker-in-datepicker-container">
-          <timepicker #startTP [disabled]="isDatePickerDisabled"></timepicker>
-          <timepicker #endTP *ngIf="isRangePicker" [disabled]="isDatePickerDisabled"></timepicker>
-        </div>
         <!--months calendar-->
         <div *ngIf="state.mode === 'month'" class="bs-media-container">
           <bs-month-calendar-view
@@ -49,7 +45,10 @@
         </div>
       </div>
     </div>
-
+    <div *ngIf="withTimepicker" class="bs-timepicker-in-datepicker-container d-flex justify-content-around">
+      <timepicker #startTP [disabled]="isDatePickerDisabled"></timepicker>
+      <timepicker #endTP *ngIf="isRangePicker" [disabled]="isDatePickerDisabled"></timepicker>
+    </div>
     <!--applycancel buttons-->
     <div class="bs-datepicker-buttons" *ngIf="false">
       <button class="btn btn-success" type="button">Apply</button>