angularangular-materialngx-daterangepicker-material

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:

enter image description here

And I want something like this:

enter image description here


Solution

  • 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