I want to show only one month in date range picker like mentioned below.
Current Date Range Picker:
And I want something like this:
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