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

我同意Moment是处理JavaScript中日期的一种方式。

我在这里有几个简单的角度示例：

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

如果您需要我添加特定于该示例的任何内容，我将很乐意这样做。

编辑

我更新了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 2

我认为您不应该在弯矩中使用力矩。它不是可摇树的，它将使您的捆绑包变得巨大。您应该看看date-fns或date.js。

Answer 3

查看Moment.js以获得“ 1周前”或“几秒钟前”等输出。

Answer 4

您可以在formatDate中使用@angular/common。请参阅此link

如何在Angular 6中格式化日期？

4 个答案:

编辑