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

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

2 Answers

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:

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 }