Display the current month and previous month in daterangepicker-inline (bs-daterangepicker-inline)

[FSalvo20]

Hello,

I’m using ngx-bootstrap@5.5.0 calendar : bs-daterangepicker-inline component in Angular 8.3.29
I need to select a date range. By default, from Monday to this day (for example):

I’d like to display on the right side of the calendar the current month and on the left side the previous month.

I found the solution with “showPreviousMonth: true” property
but it doesn’t work with the default range already shown.

Here is the code:

test-calendar.component.html

  <p>today: {{ today }}</p>

  <bs-daterangepicker-inline [bsValue]="bsInlineRangeValue"
                             [maxDate]="maxDate"
                             [bsConfig]="bsConfig"
                             (bsValueChange)="onDateRangeChange($event)">
  </bs-daterangepicker-inline>

  <p class="my-3">range selected: {{ rangeSelected }}</p>

test-calendar.component.ts

import { Component, OnInit } from '@angular/core';
import { BsLocaleService, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import * as moment from 'moment';

@Component({
  selector: 'app-test-calendar',
  templateUrl: './test-calendar.component.html',
  styleUrls: ['./test-calendar.component.css']
})
export class TestCalendarComponent implements OnInit {

  private calendarColorTheme = 'theme-dark-blue';
  public bsConfig: Partial<BsDatepickerConfig>;

  public bsInlineRangeValue: Date[];
  private rangeDateStart: Date;
  private rangeDateEnd: Date;
  public rangeSelected: string = '';

  public lastDateEnabled: Date;

  public maxDate: Date = new Date();

  constructor(private bsLocaleService: BsLocaleService) {

    let now: moment.Moment = moment();
    let monday: moment.Moment = now.clone().weekday(1);

    this.rangeDateStart = moment.utc(monday).local().toDate();
    this.rangeDateEnd = new Date();

    this.lastDateEnabled = new Date();
    this.bsInlineRangeValue = [this.rangeDateStart, this.rangeDateEnd];

    this.bsConfig = Object.assign({}, {
      containerClass: this.calendarColorTheme,
      customTodayClass: 'custom-today-class',
      showPreviousMonth: true
    });

    this.bsLocaleService.use("fr");
  }

  ngOnInit() {
  }

  get today(): string {
    return moment.utc(this.rangeDateEnd).format('DD/MM/YYYY');
  }

  public onDateRangeChange(event: Array<Date>): void {

    let dateStart: string = moment.utc(event[0]).local().format('DD/MM/YYYY');
    let dateEnd: string = moment.utc(event[1]).local().format('DD/MM/YYYY');

    this.rangeSelected = `${dateStart} to ${dateEnd}`;
    console.log("dateStart:", dateStart, " - dateEnd:", dateEnd);
  }

}

Thanks for your help.

Note: I asked the same question on StackOverflow but I got any answer.