Как форматировать даты в Angular 6?

Question

У меня есть функция, которая отображает даты в реальном времени от введенного пользователем ввода, прямо сейчас, когда пользователь вводит ввод, у меня что-то вроде этого отображается во внешнем интерфейсе [дата]:

28.10.2018 10:09

Я бы хотел, чтобы дата менялась, если ее прошлые дни, прошедшая неделя, прошлый год и т. Д.

, поэтому, если ввод был введен вчера, я хотел бы отобразить что-то вроде этого:

1d то есть один день назад, то же самое относится и к году (1y), к неделе (1w) и т. д.

Вот что я пробовал до сих пор:

Вотфункция для захвата даты и ввода ее текста

 this.activeRouter.params.subscribe((params) => {

        let id = params['id'];
        this.userService.getComments(id)
        .pipe(
          map(data => data.sort((a, b) => new Date(b.localTime).getTime() - new Date(a.localTime).getTime()))
        )
        .subscribe(data => this.comments = data);
        });

А вот эта функция добавления ввода текста и даты на сервер

     addComments(task_id) {
        const formData = this.addForm.value;
        formData.task_id = task_id;
        this.userService.addComments(formData)
        .subscribe(data => {
          this.comments.push(this.addForm.value);
          this.addForm.reset();
        });
        const date = new Date();
        const d = date.getUTCDate();
        const day = (d < 10) ? '0' + d : d;
        const m = date.getUTCMonth() + 1;
        const month = (m < 10) ? '0' + m : m;
        const year = date.getUTCFullYear();
        const h = date.getUTCHours();
        const hour = (h < 10) ? '0' + h : h;
        const mi = date.getUTCMinutes();
        const minute = (mi < 10) ? '0' + mi : mi;
        const sc = date.getUTCSeconds();
        const second = (sc < 10) ? '0' + sc : sc;
        const loctime = `${year}-${month}-${day}T${hour}`;

        this. addForm.get('localTime').setValue(loctime);

}

Вот HTML для отображения на фронтеконец HTML:

<div class="comments_details">
              <h1>Mike Ross</h1>
              <span class="days">{{comment.localTime | date:'dd.MM.yyyy H:mm'}}</span>
            </div>

Вот сервисная функция для сбора и добавления данных на сервер

  addComments(comments: Comment) {
    comments.localTime = new Date();
    return this.http.post(this.commentsUrl, comments);
  }
  getComments(id: number) {
    return this.http.get<Comment[]>(this.commentsUrl);
  }

Что мне нужно изменить в моем коде, чтобы получить нужный мне формат?

Answer 1

Вы можете использовать formatDate в @angular/common.см. ссылку

Answer 2

Я согласен, что Момент - это способ разобраться с датами в JavaScript.

У меня есть пара простых угловых примеров:

https://stackblitz.com/edit/angular-moment-example

Есливам нужно, чтобы я добавил что-то конкретное для этого примера, и я был бы рад сделать это.

EDIT

Я обновил StackBlitz, добавив функцию «Дни, Годы и т. д.».Это очень просто, вы можете просто воспользоваться функцией .humanize()

this.humanized = moment.duration(moment().diff(this.startDate)).humanize();

Здесь ничего не запрограммировано ... Я добавил больше примеров, так что, надеюсь, это начнет иметь смысл.

this.humanized = moment.duration(moment().diff(this.startDate)).humanize();
this.humanizedNow = moment.duration(moment().diff(moment())).humanize();

// if you need to force to number of days
this.daysFrom2017 = this.currentDate.diff(moment('1/1/2017'), 'days');

// if you need to force to number of weeks
this.weeks = moment().diff(this.startDate, 'week');

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

https://momentjscom.readthedocs.io/en/latest/moment/08-durations/03-humanize/

Тем не менее, похоже, что пока еще не поддерживается автоматическое преобразование в недели, НО похоже, что оно будет очень скоро, вот запрос на обновление / извлечение, который добавитэта функция:

https://github.com/moment/moment/pull/4570/files

Но в настоящее время она поддерживает все, кроме недель

Answer 3

Я думаю, вы не должны использовать момент в угловых.Это не шатается по дереву и сделает вашу связку огромной.Вы должны взглянуть на date-fns или date.js.

Answer 4

Проверьте Moment.js, чтобы получить вывод типа "1 неделя назад" или "несколько секунд назад" и т. Д.