Angular 日期选择器字符串

我已经阅读了文档并看到了一些关于更改日期格式的资料，但是我如何处理表单中的字符串而不是

date

对象

---

我需要以特定格式将日期发送到我的备份表单。是否有一个设置我错过了，所以我可以获得具有所需格式的日期字符串，而不是FormGroup中的

date

对象？

您可以使用矩.js将日期转换为您喜欢的任何格式

import * as moment from 'moment';

---

使用此选项，您可以将日期转换为YYYY-MM-DD中提到的特定格式。

您可以在模块中导入datepipe

`import {DatePipe} from '@angular/common';
.
.
.
providers: [DatePipe]`

然后在构造函数中导入datepipe

`import { DatePipe } from '@angular/common';
.
.
constructor(private datePipe: DatePipe) {}

ngOnInit() {
  var date = new Date();
  console.log(this.datePipe.transform(date,"DD.MM.YY"));
}`

参考：

导入：

import { FormControl } from '@angular/forms';
import * as moment from 'moment';

后端的日期选择器：

// example current date or specific
const datePicker = new FormControl(new Date() || '1980-01-01T00:00:00+01:00');

// Send to back with your specific format
const dateBack: string = moment(datePicker.value).format('DD.MM.YY');

后端到日期选择器：

// example date recept from backend
const dateBack: string = '2020-03-12T00:00:00+01:00';

// convert date for datePicker
const datePicker: = new FormControl(dateBack);

---

首先，您应该尝试与API负责人交谈——至少可以说，接受日期作为字符串而不是日期对象是一种不好的做法

如果这是不可能的，我认为最好的办法是尽可能晚地转换它，而不是将糟糕的逻辑隐藏在组件/服务逻辑中。用于转换传出请求中的所有数据。如果您希望为每个传出请求全局处理此解决方案，那么此解决方案将非常好。下面是一个示例拦截器（未经测试-从我的头脑中编写）：

@可注入({
providedIn:'根'
})
导出类DateInterceptor实现HttpInterceptor{
构造函数（）{}
拦截（请求：HttpRequest，下一步：HttpHandler）：可观察{
request=request.clone({
body:this.dateToString（request.body）
});
下一步返回。处理（请求）；
}
dateToString（对象：任意）：字符串{
如果（对象===null | |对象===未定义）{
返回对象；
}
if（对象类型！==“对象”）{
返回对象；
}
for（对象的常量键。键（对象））{
常量值=对象[键]；
if（值instanceof Date）{
对象[键]=此.formatDate（值）；
}else if（typeof value==='object'）{
此.dateToString（值）；
}
}
}
formatDate（日期：日期）：字符串{
返回日期。toISOString（）；
}
}此.dateToString（值）；
}
}
}
formatDate（日期：日期）：字符串{
返回日期。toISOString（）；
}

这也需要在您的模块中注册-请参阅链接文档

我认为请求体的递归转换虽然在性能方面不是完美的，但在他们修复API之前是可以接受的解决方案

如果使用多个API，则可以运行检查请求是否针对该特定API，例如，通过检查请求url：

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (request.url.toLocaleLowerCase().includes('some-terrible-api')) {
      request = request.clone({
        body: this.dateToString(request.body)
      });
    }

    return next.handle(request);
  }

intercept（请求：HttpRequest，下一步：HttpHandler）：可观察{
if（request.url.tolocalLowercase（）.includes（'some-terrable-api'））{
request=request.clone({
body:this.dateToString（request.body）
});
}
下一步返回。处理（请求）；
}

---

当然，如果您正在使用其他日期提供程序（如moment），则需要相应地调整代码，但是想法仍然是一样的。

你能提供一些字符串日期格式和样本日期格式，你需要将其发送到你的后端吗？@Arunkumaramasamy让我说我需要

DD.MM.YY

你的组件中可以使用datepipe吗？@Arunkumaramasamy我需要更改表单值而不是可见文本。你没有提到这一点，下次再提到你的应用程序大小。

@Injectable({
  providedIn: 'root'
})
export class DateInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      body: this.dateToString(request.body)
    });

    return next.handle(request);
  }

  dateToString(object: any): string {
    if (object === null || object === undefined) {
      return object;
    }

    if (typeof object !== 'object') {
      return object;
    }

    for (const key of Object.keys(object)) {
      const value = object[key];
      if (value instanceof Date) {
        object[key] = this.formatDate(value);
      } else if (typeof value === 'object') {
        this.dateToString(value);
      }
    }
  }

  formatDate(date: Date): string {
    return date.toISOString();
  }
}    this.dateToString(value);
      }
    }
  }

  formatDate(date: Date): string {
    return date.toISOString();
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (request.url.toLocaleLowerCase().includes('some-terrible-api')) {
      request = request.clone({
        body: this.dateToString(request.body)
      });
    }

    return next.handle(request);
  }