get past time from date

by skydivematy

HTML

<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<div id="ajaxComments">
  <div class="mdl-list-Comments">
    <ul class="mdl-list mdl-list-comments">
      <li class="mdl-list__item mdl-list__item--three-line"><span class="mdl-list__item-primary-content"><i class="material-icons mdl-list__item-avatar">person</i><input type="hidden" name="hidden" class="show" value="2016-08-11"> <time class="dateFromDate icon-time">5D</time><span class="author">Antonio</span>
        <span class="mdl-list__item-text-body">El pasado 5 de agosto fuimos mi hijo Joel, mi mujer Eugenia...</span>
        </span><span class="mdl-list__item-secondary-content"><a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a></span></li>
      <li class="mdl-list__item mdl-list__item--three-line"><span class="mdl-list__item-primary-content"><i class="material-icons mdl-list__item-avatar">person</i><input type="hidden" name="hidden" class="show" value="2009-08-31"> <time class="dateFromDate icon-time">3D</time><span class="author"> Richstein</span>
        <span class="mdl-list__item-text-body">Tolles Team!!!! Meine Tochter war begeistert!!!Weiter so!!!...</span>
        </span><span class="mdl-list__item-secondary-content"><a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a></span></li>
      <li class="mdl-list__item mdl-list__item--three-line"><span class="mdl-list__item-primary-content"><i class="material-icons mdl-list__item-avatar">person</i><input type="hidden" name="hidden" class="show" value="2007-09-03"> <time class="dateFromDate icon-time">1Y</time><span class="author">Lukas From Dortmund</span>
        <span class="mdl-list__item-text-body">super toll hat richtig spaß gemacht muss man mal gemacht...</span>
        </span><span...

CSS

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
body {
  background: #fafafa;
}

span.author {
  font-weight: bold;
}

time.dateFromDate.icon-time {
  font-size: 12px;
  float: right;
}

.mdl-list__item--three-line .mdl-list__item-text-body {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 18px;
  /* height: 52px; */
  color: rgba(0, 0, 0, .54);
  display: block;
  padding: 0;
}

JavaScript

! function(i) {
  i.fn.simpleSpy = function(t, e) {
    return t = t || 2, e = e || 8e3, this.each(function() {
      function n() {
        var t = i(h[s]).css({
          height: 0,
          opacity: 0
        }).prependTo(a);
        a.find("> li:last").animate({
          opacity: 0
        }, 1e3, function() {
          t.animate({
            height: o
          }, 1e3).animate({
            opacity: 1
          }, 1e3), i(this).animate({
            height: 0
          }, 1e3, function() {
            i(this).remove()
          })
        }), s++, s >= c && (s = 0), setTimeout(n, e)
      }
      var a = i(this),
        h = [],
        s = t,
        c = 0,
        o = a.find("> li:first").height();
      a.find("> li").each(function() {
        h.push("<li>" + i(this).html() + "</li>")
      }), c = h.length, a.wrap('<div class="ajaxComments" />').parent().css({
        height: o * t
      }), a.find("> li").filter(":gt(" + (t - 1) + ")").remove(), n()
    })
  }
}(jQuery);

// VERSION 1
//
//$(function () {
//    $('ul.spy').simpleSpy();
//});
//
(function($) {

  $.fn.simpleSpy = function(limit, interval) {
    limit = limit || 3;
    interval = interval || 8000;
    return this.each(function() {

      var $list = $(this),
        items = [], // uninitialised
        currentItem = limit,
        total = 0; // initialise later on
      //                    height = $list.find('> li:first').height();
      // capture the cache


      $list.find('> li').each(function() {




        items.push('<li class="mdl-list__item mdl-list__item--three-line">' + $(this).html() + '</li>');

      });
      total = items.length;


      $list.wrap('<div class="mdl-list-Comments" />').parent().css({
        //                height: height * limit
      });

      $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

      // 2. effect
      function spy() {
        // insert a new item with opacity and height of zero
        //var $insert =...