0

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

Vega
  • 27,856
  • 27
  • 95
  • 103
Bhautik Khunt
  • 31
  • 5

2 Answers2

0

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

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • Please do not encourage low quality posts by answering. The question post has zero code, it is off-topic on SO. Please use your voting power to vote to close this kind of questions until the OP edits to a SO's acceptable standards quality. SO is not a forum, not a chat, it is a wiki, we should expect higher quality than some images. It will anyway end up by back and forth comments and some frustrations – Vega Jun 28 '22 at 09:41
  • I agree, but you've already made your remarks on that matter and hopefully OP will refactor their question to more acceptable standards. Because he's a new user I am certainly willing to give him the benefit of doubt to rectify himself still while giving my best to provide an quality answer with given information. Even if the topic gets closed, the question is not going to disappear. And besides, I found the question intriguing and indeed it does seem like a unique problem - even if the question was of poor quality. – Joosep Parts Jun 28 '22 at 09:47
0

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
}
Johan Aspeling
  • 765
  • 1
  • 13
  • 38