如何从NGX-Bootstrap日期选择器中获取自定义日期格式的值

Question

我正在使用NGX-Bootstrap为我的Angular6项目。我有一个响应式表单，并添加了日期选择器，但从日期选择器返回的值是完整格式，例如："2018-11-07T05:12:35.000Z"。但我想要的是MM-DD-YYYY格式。

- duddu venkatesh

Answer 1

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

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

然后将date指定给表单控制器

- Cyber Progs

---

谢谢你的天才回答，伙计。干杯！ - Anjana Silva

这将显示mm/dd/yyyy格式，有没有办法使用bsDatepicker将日期存储到数据库中，并从数据库获取值并在同一字段中显示它，就像添加和编辑操作一样，当我们编辑时，它应该再次以与添加操作相同的格式进行存储。 - Ravichandra

Answer 2

为了更加通用，您可以创建一个指令，以您想要的格式返回日期。例如。

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

- Rahul K Pandey

Answer 3

尝试

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

- mrapi

---

上面的代码行仅显示输入标记中日期格式。但是，使用响应式表单从输入返回值时，它将返回2018-11-07T05:12:35.000Z。它不会返回dateInputFormat的值。为了临时修复，我正在使用JavaScript文档获取值并更新反应表单数据。 - duddu venkatesh

此配置将更改输入字段中的日期格式，而不是实际输出。 - tarek noaman