Want to show Chat message according to the date like whatsapp chat

Ionic Framework ionic-v3
1

i am getting stuck on displaying messages according to the date like whatsapp chat.

<div *ngFor=“let message of messages;”>

<div *ngIf="(message.type == ‘text’)&&(message.fromUser !== nickname)" class=“chat-message” [ngClass]="{‘chat-message right’: message.fromUser === nickname, ‘chat-message left’: message.fromUser !== nickname}">

<div class=“message-detail”>

{{message.text}}

<span class=“time”>{{message.created | date:‘dd.MM hh:MM’}}</span>

<br>

</div>

</div>

<br>

<div *ngIf="(message.type == ‘text’)&&(message.fromUser === nickname)" class=“chat-message” [ngClass]="{‘chat-message right’: message.fromUser === nickname, ‘chat-message right’: message.fromUser !== nickname}">

<div class=“chat-message right”>

{{message.text}}

<span class=“time”>{{message.created | date:‘dd.MM hh:MM’}}</span>

<br>

</div>

</div>

<br>

<div *ngIf="(message.type == ‘image’)&&(message.fromUser !== nickname)" class=“chat-message” [ngClass]="{‘my_message’: message.fromUser === nickname, ‘chat-message left’: message.fromUser !== nickname}">

<div class=“message-detail”>

<img src="{{message.location}}" style=“width: 100%” #myImage (click)=“presentImage(myImage)”>

<span class=“time”>{{message.created | date:‘dd.MM hh:MM’}}</span>

<br>

</div>

</div>

<br>

</div>

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.11
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 8.11.3
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

1 Like
2

Timestamp Functionality

The TIMESTAMP data type is used to return value which also contains both date and time parts. The range of MySQL TIMESTAMP type is ‘1970-01-01 00:00:01’ UTC to ‘2038-01-19 03:14:07’ UTC.

The MySQL TIMESTAMP values are converted from the current time zone to UTC while storing and converted back from UTC to the current time zone when retrieved. The default, current time zone for each connection is the server’s time. Suppose you stored a TIMESTAMP value, then change the time zone and try to retrieve the value, it returns the different value as you stored earlier. It happens because the time zone used for conversion is not same.

3

Please did you find a solution to this…i’m also stuck on the same problem

4

No dear iam also searching on that

5

I found a solution…would you like me to share it?

6

please share the solution …iam stuck in this

7 
      <ion-item no-lines *ngFor="let item of allMessages">
        <div style="text-align: center">
          <ion-row *ngIf="isDifferentDay(i)">
            <ion-col>
              <ion-badge color="primary" text-center
                >{{ getMessageDate(i) }}
              </ion-badge>
            </ion-col> 
          </ion-row>
        </div>

        <div class="bubble me" *ngIf="item.sentBy === match.uid">
          <h3 class="line-breaker">{{ item.message }}</h3>
          <p class="time-me">{{ item.time }}</p>
        </div>

        <div class="bubble you" *ngIf="item.sentBy != match.uid">
          <h3 class="line-breaker">{{ item.message }}</h3>
          <p class="time-you">{{ item.time }}</p>
        </div>
        <div
          class="seen"
          *ngIf="item[matchUid] == 0 && item.sentBy !== match.uid"
        >
          Seen
        </div>
      </ion-item>

//TS CODE

  isDifferentDay(messageIndex: number): boolean {
    if (messageIndex === 0) return true;

    const d1 = new Date(this.allMessages[messageIndex - 1].timeStamp);
    const d2 = new Date(this.allMessages[messageIndex].timeStamp);

    return (
      d1.getFullYear() !== d2.getFullYear() ||
      d1.getMonth() !== d2.getMonth() ||
      d1.getDate() !== d2.getDate()
    );
  }

  getMessageDate(messageIndex: number): string {
    let dateToday = new Date().toDateString();
    let longDateYesterday = new Date();
    longDateYesterday.setDate(new Date().getDate() - 1);
    let dateYesterday = longDateYesterday.toDateString();
    let today = dateToday.slice(0, dateToday.length - 5);
    let yesterday = dateYesterday.slice(0, dateToday.length - 5);

    const wholeDate = new Date(
      this.allMessages[messageIndex].timeStamp
    ).toDateString();

    this.messageDateString = wholeDate.slice(0, wholeDate.length - 5);

    if (
      new Date(this.allMessages[messageIndex].timeStamp).getFullYear() ===
      new Date().getFullYear()
    ) {
      if (this.messageDateString === today) {
        return "Today";
      } else if (this.messageDateString === yesterday) {
        return "Yesterday";
      } else {
        return this.messageDateString;
      }
    } else {
      return wholeDate;
    }
  }
3 Likes
8

Thank you so much
Sam2486 i will follow this steps and please be in touch