Who to define date pattern to ngx-bootstrap Daterangepicker?

Question

I use patter date to bsDatepicker and work fine.

<input type="text" class="form-control" formControlName="birthday" bsDatepicker [bsConfig]="bsConfig" [(bsValue)]="birthday" value="{{dataNascimento | date:'dd/MM/yyyy - dd/MM/yyyy' }}" />

But in bsDaterangepicker not working

<input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [bsConfig]="bsConfig" [maxDate]="bsConfig.maxDate" value="{{periodo | date:'dd/MM/yyyy - dd/MM/yyyy' }}" />

Erro message

ERROR Error: InvalidPipeArgument: 'Wed Nov 22 2017 12:50:19 GMT-0200 (Horário brasileiro de verão),Wed Nov 22 2017 12:50:19 GMT-0200 (Horário brasileiro de verão)' for pipe 'DatePipe'

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 2.0.0-beta.8

Angular: 5.0.0

Bootstrap: 3.3.7

Build system: Angular CLI 1.5.2

Question

Who to define date pattern to Daterangepicker?

Answer 1

May be this also will be work. You can use in HTML:

<input class="form-control" bsDaterangepicker id="rangedagte" type="text" [bsConfig]="bsConfig" [(ngModel)]="bsRangeValue" (bsValueChange)="selectRange($event)" />

In component range they have rangeInputFormat property with your format in bsConfig we can configure.

export class DateComponent implements OnInit {

initialDate = new Date();
  bsRangeValue: Date[];
  maxDate = new Date();
  bsConfig: Partial<BsDatepickerConfig> = new BsDatepickerConfig();

constructor() {
    this.maxDate.setDate(this.maxDate.getDate() + 7);
    this.bsRangeValue = [this.initialDate, this.maxDate];
  }

  ngOnInit() {
    this.bsConfig = Object.assign({}, { showWeekNumbers: false, containerClass: 'theme-blue', rangeInputFormat: 'DD/MMM/YYYY' });

   }
}

Answer 2

Yes because for the range they have rangeInputFormat property with your format i.e rangeInputFormat: 'DD-MM-YYY'

https://valor-software.com/ngx-bootstrap/#/datepicker#bs-datepicker-config