[英]moment.js change format based on difference
I want to follow the same structure as content posting websites where new posts follow something like: 我想采用与内容发布网站相同的结构,其中新帖子遵循以下内容:
(seconds/minutes/hours ago), (yesterday), (days ago), (MMM Do YY)
. (seconds/minutes/hours ago), (yesterday), (days ago), (MMM Do YY)
。
How would I rearrange the JS to follow this format and go to (MMM Do YY)
after say, 3 days
? 3 days
如何重新排列JS以遵循此格式并转到(MMM Do YY)
?
// iterates over every element with the .js-time-ago css class $('.date').each(function() { var $this = $(this), textDate = $this.data('date'), // gets the date from the date attribute postedDate = moment(textDate, ['DDMMMMY', 'MMMMDDY']).format(), // formats the date in a formate that will continue to be supported by Moment JS today = moment().format(), // gets today's date timeSince = moment(today, 'YYYY-MM-DD').diff(moment(postedDate, 'YYYY-MM-DD'), 'days'); // sets up the dates to be compared so that we can get a number for if statement below if (timeSince >= 0) $this.text(moment(postedDate).fromNow()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> <div class="date" data-date="01 April 2018"></div> <div class="date " data-date="26 May 2018"></div> <div class="date" data-date="27 May 2018"></div>
You're actually really close - you just need to implement the conditional logic based on timeSince
being within the range you want, in your example 3 days. 实际上,您真的很亲密-您只需要基于timeSince
实施条件逻辑,因为它处于所需范围内,在您的示例中为3天。
If you simply switch your if
statement with a ternary (or even an IF-ELSE) that checks to see if the timeSince
value is less than or equal to 3, you can achieve the desired result. 如果仅使用三元 (甚至是IF-ELSE)切换if
语句,以检查timeSince
值是否小于或等于3,则可以实现所需的结果。 Here's the ternary statement to use in place of your current if
one: 下面是地方你目前的使用三元的语句if
一个:
(timeSince <= 3) ? $this.text(moment(postedDate).fromNow()) : $this.text(moment(postedDate).format('MMM Do YY'));
The ternary/conditional statement first takes a condition to evaluate - in your case, whether or not timeSince
is less than or equal to 3 days ago. 三元/条件语句首先需要评估一个条件-在您的情况下, timeSince
是否小于或等于3天前。 If the condition is true, the first expression is executed - in this case, formatting the value from your .date
selector using Moment's x ago
format. 如果条件为真,则执行第一个表达式-在这种情况下,使用Moment的x ago
格式对.date
选择器中的值进行格式化。 If the condition is false, meaning more than 3 days ago in this example, it uses Moment to format the text using the MMM Do YY
format. 如果条件为假(在此示例中为3天前),则它使用Moment使用MMM Do YY
格式设置文本格式。
Complete CodePen example here: https://codepen.io/anon/pen/zjgbmp 完整的CodePen示例在这里: https ://codepen.io/anon/pen/zjgbmp
For an example of how a ternary helps keeps your code concise, here's the same solution using IF-ELSE
: 有关三元如何保持代码简洁的示例,这是使用IF-ELSE
的相同解决方案:
if (timeSince <= 3) {
$this.text(moment(postedDate).fromNow());
}
else {
$this.text(moment(postedDate).format('MMM Do YY'));
}
We can acheive what you want by doing two things to your code first passing ing 'day'
into the moment().diff()
function to get the difference in days then checking that value is smaller than 3 using a ternary statement very similar to an if
. 我们可以通过对代码做两件事来实现您想要的东西,首先将'day'
传递给moment().diff()
函数以获取天数的差,然后使用与以下非常类似的三元语句检查该值是否小于3 if
。
I've cleaned up the code abit to show the 5 steps i'm taking 我已经整理了一些代码以显示我正在执行的5个步骤
function formatDate() { const NOW = new Date(); $('.date').each(function() { const DATE = new Date($(this).data('date')); const DIFF = moment(NOW).diff(DATE, 'day'); const FORMAT = DIFF < 3 ? moment(DATE).fromNow() : moment(DATE).format('MMM Do YY'); $(this).text(FORMAT); }); } formatDate()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> <div class="date" data-date="01 April 2018"></div> <div class="date " data-date="26 May 2018"></div> <div class="date" data-date="27 May 2018"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.