如何从NGX-Bootstrap Datepicker获取自定义日期格式值

Question

我正在为我的angular6项目使用NGX-Bootstrap。我有反应形式并向其添加了日期选择器，并且从日期选择器返回值时获得了完整格式，例如：“ 2018-11-07T05：12：35.000Z”。但是我想要MM-DD-YYYY。

Answer 1

在返回日期之前，将日期格式转换为以下格式：

let date = new Date(dateValue).toLocaleDateString();

然后将date分配给表单控制器

Answer 2

尝试

  <input  bsDatepicker [bsConfig]="{ dateInputFormat: 'MM-DD-YYYY'}" >

Answer 3

要更通用，可以创建一个指令，以所需的格式返回日期。例如。

<input changeDateFormat type="text" placeholder="Datepicker" class="form-control" #dp="bsDatepicker" bsDatepicker [(bsValue)]="bsValue">

export class changeDateFormatDirective implements OnChanges {
@Input() bsValue: Date;
@Output() bsValueChange = new EventEmitter();

constructor(private cdr: ChangeDetectorRef) { }

ngOnChanges(changes: SimpleChanges) {
//change Date format here, you can import format date from @angular/common
this.bsValueChange.emit(newDateFormat);
this.cdr.detectChanges();
}
}