Строка Datepicker

Question

Я прочитал документацию и увидел некоторые материалы по изменению формата даты, однако, как мне работать со строками в формах вместо Date объектов?

Мне нужно отправить на свою форму с датой в указанном формате c. Есть ли параметр, который я пропускаю, чтобы я мог получить строку даты с нужным форматом вместо Date объекта в FormGroup?

Answer 1

Во-первых, вы должны попытаться поговорить с людьми, ответственными за API - принимать даты в виде строк вместо объектов даты - это, по меньшей мере, плохая практика.

Если это невозможно, я бы сказал, Лучше всего конвертировать его как можно позже, чтобы не хоронить эту ужасную логику c в логи ваших компонентов / услуг c. Используйте HttpInterceptor для преобразования всех данных в ваших исходящих запросах. Это решение будет хорошо, если вы хотите обрабатывать его глобально для каждого исходящего запроса. Пример перехватчика (не тестировался - выписан из моей головы) ниже:

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

Это также необходимо зарегистрировать в вашем модуле - см. Связанные документы.

Я думаю, что рекурсивное преобразование тела запроса, хотя и не идеальное с точки зрения производительности, является вполне приемлемым решением, пока они не исправят свой 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);
  }

Конечно, если вы используете других провайдеров дат (например, момент), вам необходимо соответствующим образом изменить свой код, но идея остается прежней.

Answer 2

Вы можете импортировать 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"));
}`

Ref: https://stackblitz.com/edit/angular-3zyx8d

Answer 3

Импорт:

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

DatePicker для Backend:

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

Backend для DatePicker:

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

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

Answer 4

Вы можете использовать момент. js для преобразования даты в любой формат, который вам нравится.

import * as moment from 'moment';

moment(date).format("YYYY-MM-DD");

, используя это, вы можете конвертировать дату в указанном формате c, как указано в ГГГГ-ММ -DD.