As I've mentioned it on the previous post Creating object from a text, I'm using moment library, to insert dates on my website.
It provides easy, flexible way to display dates, for example:
|Last week||Last Monday at 2:30 AM|
|The day before||Yesterday at 2:30 AM|
|The same day||Today at 2:30 AM|
|The next day||Tomorrow at 2:30 AM|
|The next week||Sunday at 2:30 AM|
|Month (MMMM)||January ... December|
|Day (Do)||1st 2nd ... 30th 31st|
|Year (YYYY)||1970 ... 2018 2030|
At first, I've inserted code into the
<body> tag, under post title:
if post.date? then @h6 id: 'date', => date = moment post.date @span 'Published: ' @time datetime: date.format(), date.calendar null, sameDay: '[Today]', nextDay: '[Tomorrow]', nextWeek: 'dddd', lastDay: '[Yesterday]', lastWeek: '[Last] dddd' sameElse : "MMMM Do YYYY"
It caused a post date appear always as "Yesterday", regardless of the current date. Well, it wasn't exactly what I expected.
After a while I've find out that the problem arised because function
date.calendar was called only once, when the static page was created on the server.
I had to figure out, how to render date on the web browser site, instead of the server site.
The output looked like that:
<h6 id="date"><span>Published: </span> <time datetime="2015-11-14T00:00:00+00:00">Yesterday</time></h6>
I used jQuery script to find the date element in my html code and voila, the problem was solved.
@coffeescript => ### @coffeescript tag is a coffeescript function that converts coffee into js directly. Thanks to that, there is no need for creating additional .js file for scripts. ### element = $("#date time") date = moment element.attr("datetime") element.text date.calendar null, sameDay: '[Today]', nextDay: '[Tomorrow]', nextWeek: 'dddd', lastDay: '[Yesterday]', lastWeek: '[Last] dddd' sameElse : "MMMM Do YYYY"
date.format('Do MMMM YYYY') in the
if post.date? then @h6 id: 'date', => date = moment post.date @span 'Published: ' @time datetime: date.format(), date.format('MMMM Do YYYY')
The result is most visible in newest posts :)