How to show only one month in ngx-daterangepicker-material date range picker?

Question

I want to show only one month in date range picker like mentioned below.

Current Date Range Picker

And I want something like this.

Single month show in Date range picker

Answer 1

I didn't see the right option from the docs, so I just removed the right side of the calendar.

import {
  AfterViewInit,
  Component,
  ViewChild,
} from '@angular/core';
import * as moment from 'moment';
import { DaterangepickerDirective } from 'ngx-daterangepicker-material';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChild(DaterangepickerDirective, { static: true })
  picker: DaterangepickerDirective;
  selected: { startDate: moment.Moment; endDate: moment.Moment };
  name = 'Angular';
  open() {
    this.picker.open();
  }

  ngAfterViewInit() {
    const rightCalendar = document.getElementsByClassName('calendar right');
    if (rightCalendar.item(0)) {
      rightCalendar.item(0).remove();
    }
  }
}

Html

<input type="text" matInput
    ngxDaterangepickerMd
    [locale]="{applyLabel: 'ok', format: 'DD-MM-YYYY'}"
    startKey="start"
    endKey="end"
    [alwaysShowCalendars]="false"
    [(ngModel)]="selected"
    name="daterange"/>

Working example: https://stackblitz.com/edit/ngx-daterangepicker-material-for-angular8-zucirm?file=src%2Fapp%2Fapp.component.html

Answer 2

You can do it with the displayMonths option in the config.

Template:

<bs-daterangepicker-inline
  [bsValue]="bsInlineRangeValue"
  [bsConfig]="config"
></bs-daterangepicker-inline>

Code behind:

config: Partial<BsDaterangepickerInlineConfig> = {
  displayMonths: 1
}