I have this code to transform date to a readable time format

$('time').each(function (i, e) {

        if ($(e).attr("class") == 'mtime') {

            var now = moment();
            moment.lang('en', {
                calendar : {
                    lastDay : '[Yesterday] LT',
                    sameDay : 'LT',
                    nextDay : '[Tomorrow,] LT',
                    lastWeek : 'ddd LT',
                    nextWeek : 'ddd LT',
                    sameElse : 'MMM D[/]YY' //something to do with this?
                }

            });

            var elem = $(e).attr('datetime');
            var time = moment($(e).attr('datetime'));
            var diff = now.diff(time, 'days');

            $(e).html(time.calendar());

        }

});

returned output:

<time class="mtime" datetime="2016-02-26 10:31:22" title="2016-02-26 10:31:22">Feb 26/16</time>

The problem is how can I hide the year if current year. And if past year format it to "M/D/YY".

expected output:

- <time>Feb 26</time> <!--// current year -->
- <time>12/25/15</time> <!--// last year -->
- <time>8/1/14</time> <!--// last year -->

Kindly advise guys! TIA

I have this code to transform date to a readable time format

$('time').each(function (i, e) {

        if ($(e).attr("class") == 'mtime') {

            var now = moment();
            moment.lang('en', {
                calendar : {
                    lastDay : '[Yesterday] LT',
                    sameDay : 'LT',
                    nextDay : '[Tomorrow,] LT',
                    lastWeek : 'ddd LT',
                    nextWeek : 'ddd LT',
                    sameElse : 'MMM D[/]YY' //something to do with this?
                }

            });

            var elem = $(e).attr('datetime');
            var time = moment($(e).attr('datetime'));
            var diff = now.diff(time, 'days');

            $(e).html(time.calendar());

        }

});

returned output:

<time class="mtime" datetime="2016-02-26 10:31:22" title="2016-02-26 10:31:22">Feb 26/16</time>

The problem is how can I hide the year if current year. And if past year format it to "M/D/YY".

expected output:

- <time>Feb 26</time> <!--// current year -->
- <time>12/25/15</time> <!--// last year -->
- <time>8/1/14</time> <!--// last year -->

Kindly advise guys! TIA

• javascript
• jquery
• momentjs

3 Answers 3

From version 2.14.0 we can pass callbacks to specific moment context:

sameElse: function() {
  if (this.years() === now.years()) {
    return 'MMM D'
  } else {
    return 'M/D/YY';
  }
}

$('time').each(function(i, e) {
  if ($(e).attr("class") == 'mtime') {
    var now = moment();
    moment.lang('en', {
      calendar: {
        lastDay: '[Yesterday] LT',
        sameDay: 'LT',
        nextDay: '[Tomorrow,] LT',
        lastWeek: 'ddd LT',
        nextWeek: 'ddd LT',
        sameElse: function() {
          if (this.years() === now.years()) {
            return 'MMM D'
          } else {
            return 'M/D/YY';
          }
        }
      }
    });
    var elem = $(e).attr('datetime');
    var time = moment($(e).attr('datetime'));
    var diff = now.diff(time, 'days');
    $(e).html(time.calendar());
  }
});

<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.14.1/moment.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<time class="mtime" datetime="2016-02-26 10:31:22"></time> <br />
<time class="mtime" datetime="2015-12-25 10:31:22"></time> <br />
<time class="mtime" datetime="2014-08-01 10:31:22"></time> <br />

You could define your own custom calendar format, say, something like: 'thisYear'

moment.calendarFormat = function (myMoment, now) {
    var diff = myMoment.diff(now, 'days', true);
    var nextMonth = now.clone().add(1, 'month');

    var retVal = (myMoment.year() === now.year()) ? 'thisYear' :
        diff < -6 ? 'sameElse' :
        diff < -1 ? 'lastWeek' :
        diff < 0 ? 'lastDay' :
        diff < 1 ? 'sameDay' :
        diff < 2 ? 'nextDay' :
        diff < 7 ? 'nextWeek' : 'sameElse';
        
    console.log(retVal);
    return retVal;
};

$('time').each(function (i, e) {

        if ($(e).attr("class") == 'mtime') {
            var formats = {
                    lastDay : '[Yesterday] LT',
                    sameDay : 'LT',
                    nextDay : '[Tomorrow,] LT',
                    lastWeek : 'ddd LT',
                    nextWeek : 'ddd LT',
                    thisYear : 'MMM D',
                    sameElse : 'M/D/YY'
            };

            var elem = $(e).attr('datetime');
            var time = moment(elem);

            $(e).html(time.calendar(moment(), formats));
        }
});

<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.14.1/moment.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<time class="mtime" datetime="2016-02-26 10:31:22"></time> <br />
<time class="mtime" datetime="2015-12-25 10:31:22"></time> <br />
<time class="mtime" datetime="2014-08-01 10:31:22"></time> <br />

It looks like you have most of what you need in your code. You just need to pare your now variable to the value that you are getting back from the time DOM attribute.

P.S. After looking at the code a little more I made more chances than I originally thought.

 // instead is checking for the time elements with the mtime class, just select them using the jQuery class selector. It's far more efficient.
    $('.mtime').each(function(i, e) {

        var elem = $(e).attr('datetime'); // grabs the time DOM element and caches it.
        var eDateTime = elem.attr('datetime'); // could also just check against this. No real need to wrap momentJS around it.
        var now = moment(); // gets the current now datetime.
        var time = moment(eDateTime); // this grabs the datetime from the element and wraps moment around it. 

        moment.lang('en', {
          calendar: {
            lastDay: '[Yesterday] LT',
            sameDay: 'LT',
            nextDay: '[Tomorrow,] LT',
            lastWeek: 'ddd LT',
            nextWeek: 'ddd LT',
            sameElse: function() {
              if (time === now) { // pare the datetimes
                return 'MMM D'
              } else {
                return 'M/D/YY';
              }
            }
          }

            if (time !== now) { // pare the datetimes. If they do not match it renders.
                elem.html(time.calendar()); 
            }
        }
  });

Hope this helped.