谁将日期模式定义为ngx-bootstrap Daterangepicker?

时间:2017-11-23 14:59:55

标签: javascript angular date ngx-bootstrap angular-daterangepicker

我将模式日期用于bsDatepicker并正常工作。

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

但是在bsDaterangepicker无法正常工作

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

错误消息

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'

ngx-bootstrap,Angular和Bootstrap的版本:

ngx-bootstrap:2.0.0-beta.8

Angular:5.0.0

Bootstrap:3.3.7

构建系统:Angular CLI 1.5.2

问题

谁将日期模式定义为Daterangepicker?

2 个答案:

答案 0 :(得分:0)

是的,因为对于他们具有rangeInputFormat属性的范围,您的格式为rangeInputFormat: 'DD-MM-YYY'

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

答案 1 :(得分:0)

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' });

   }
}