CODEWITHSUNDEEP
angularngx-bootstrap
Swagata Adhikary
Swagata Adhikary

Reputation: 275

Set max date dynamically in ngx-bootstrap Datepicker

I am trying to implement a bs Date Range picker in angular. On component load I am setting the mindate to current date. But how can I set the max date after selecting min Date.

Because I want to restrict the user that he/she can not select max date not more than 3 days after selecting the min date. For an example if user select 5th Apr 2020 as start date then user's max date will be restricted to 7th Apr 2020. Days will be disabled after 7th Apr 2020.

Component HTMl -

<input type="text" 
#dp="bsDaterangepicker"
formControlName="bookingPeriod"
[minDate]="bookingStart"
[maxDate]="bookingEnd"
bsDaterangepicker
[bsConfig]="{ adaptivePosition: true, rangeInputFormat: 'DD MMMM, YYYY', displayOneMonthRange: true }" />

Component Ts -

public bookingStart: any = Date;
public bookingEnd: any = ""; 

constructor() {
  this.bookingStart = new Date();
  this.bookingStart.setDate(this.bookingStart.getDate());
}

Upvotes: 2

Views: 7420

Answers (1)

Fab2
Fab2

Reputation: 179

If you modify the example on the ngx-bootstrap page a little bit with the help of this: Javascript: Adding days to any date, you could write something like this:

datepicker.ts

  bsValue = new Date();
  bsRangeValue: Date[];
  minDate: Date;
  maxDate: Date;

  constructor() {
    this.bsRangeValue = [this.bsValue, this.maxDate];
    this.minDate = new Date();
    this.maxDate = new Date();
    this.minDate.setDate(this.minDate.getDate() + 10);
    this.maxDate.setDate(this.minDate.getDate() + 3);
  }

datepicker.html

  <div class="row">
    <h1>Max Date</h1>
    <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
      <input class="form-control"
             placeholder="Datepicker"
             ngModel
             bsDatepicker
             [minDate]="minDate"
             [maxDate]="maxDate">
    </div>
    <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
      <input class="form-control"
             placeholder="Daterangepicker"
             ngModel
             bsDaterangepicker
             [minDate]="minDate"
             [maxDate]="maxDate">
    </div>
  </div>

This should help you.

Upvotes: 4

Related Questions