How to show div with date at the beginning of a conversation and every time the conversation is active again on another date

I am making a chat application with AngularJS and JavaScript and when you begin a conversation with someone I want to show a div (blue date in the picture) to show indicating at what date the conversation has begon. And when the conversation is over and started again on another date I want to show the date div only once for that day. And when you scroll up you then see the conversation from the other date.

Here is the image

As you can see there is a conversation from 17 April 2015 and a conversation from 5 May 2015. And when I type the date from today gets show multiple times.

I don’t know how to fix it. Any help would be appreciated.

Edit

Here is some code from the HTML:

<div sd-slimscroll sd-height="auto" sd-color="#878787"  sd-always-visible="true" sd-size="5px" class="conversation-container">
<!-- WHOLE MESSAGE FROM USER/ADMIN (INCLUDING DATE) -->
<div class="{{ message.animationClass }}" ng-repeat="message in conversation.Messages">
    <!-- DATE (BLUE DATE IN IMAGE -->
    <div class="row">
        <div class="col-lg-12">
            <div class="date text-center">
                {{ message.time | date: "dd MMMM yyyy" }}
            </div>
        </div>
    </div>
    <!-- WHAT THE USER/ADMIN HAS TYPED -->
    <div class="row">
        <div class="col-lg-12">
            <div class="media {{ message.messageClass }}">
                <div class="media-body">
                    <h5 class="media-heading">{{conversation.Person.name}}</h5>
                    {{ message.text }} <img class="img-responsive" ng-show="message.imageURL" src="{{ message.imageURL }}"/><br />
                    <div class="message-time">{{ message.time | date: "HH:mm" }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer

check if the date for today has already been shown (in variable), and if so, do not show it. Upon the next day, that same logic will show the date at the beginning, and not show it until the next day..

Advertisement

Answer