javascriptangulardatepickerangular-materialngx-daterangepicker-material

ngx-daterangepicker-material disable n number of days from start date


I am using ngx-daterangepicker-material for date picker in angular 9 project. I have requirement that, when user selects start date than 60 days from start date to the future and past should be not be selectable

enter image description here

For example, if user select start date 1st Jan 2021 than end date between 1st of March 2021(60 days future) and 1st of November 2020(60 days past) should not be selectable for user. rest all end date should be selectable

Tried doing it with minDate, maxDate but wasn't able to do it.

Thanks in advance!


Solution

  • input
    type="text"
    ngxDaterangepickerMd
    [(ngModel)]="selected"
    (rangeClicked)="rangeClicked($event)"
    (datesUpdated)="datesUpdated($event)"
    [showCustomRangeLabel]="true"
    [alwaysShowCalendars]="true"
    [ranges]="ranges"
    [linkedCalendars]="true"
    [showClearButton]="false"
    [isInvalidDate] = "isInvalidDate"
    [keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
    [showRangeLabelOnInput]="showRangeLabelOnInput"
    />
    
    constructor() {
     this.maxDate = moment().add(2, 'weeks');
     this.minDate = moment().subtract(3, 'days');
    
     this.alwaysShowCalendars = true;
     this.keepCalendarOpeningWithRange = true;
     this.showRangeLabelOnInput = true;
     this.selected = {
       startDate: moment().subtract(1, 'days'),
       endDate: moment().subtract(1, 'days'),
     };
    }
    rangeClicked(range) {
      console.log('[rangeClicked] range is : ', range);
    }
    datesUpdated(range) {
     console.log('[datesUpdated] range is : ', range);
    }
    
    export class DateRangeComponent implements OnInit {
    selected: any;
    alwaysShowCalendars: boolean;
    showRangeLabelOnInput: boolean;
    keepCalendarOpeningWithRange: boolean;
    maxDate: moment.Moment;
    minDate: moment.Moment;
    
    ranges: any = {
    Today: [moment(), moment()],
    Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [
      moment()
        .subtract(1, 'month')
        .startOf('month'),
      moment()
        .subtract(1, 'month')
        .endOf('month'),
     ],
    };
    
    isInvalidDate = (m: moment.Moment) => {
      return this.invalidDates.some(d => d.isSame(m, 'day'));
    };
    
    constructor() {
     this.maxDate = moment().add(2, 'weeks');
     this.minDate = moment().subtract(3, 'days');
    
     this.alwaysShowCalendars = true;
     this.keepCalendarOpeningWithRange = true;
     this.showRangeLabelOnInput = true;
     this.selected = {
       startDate: moment().subtract(1, 'days'),
       endDate: moment().subtract(1, 'days'),
     };
    }
    rangeClicked(range) {
      console.log('[rangeClicked] range is : ', range);
    }
    datesUpdated(range) {
     console.log('[datesUpdated] range is : ', range);
    }
    }