簡體   English   中英

moment.js根據差異更改格式

[英]moment.js change format based on difference

我想采用與內容發布網站相同的結構,其中新帖子遵循以下內容:

(seconds/minutes/hours ago), (yesterday), (days ago), (MMM Do YY)

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> 

實際上,您真的很親密-您只需要基於timeSince實施條件邏輯,因為它處於所需范圍內,在您的示例中為3天。

如果僅使用三元 (甚至是IF-ELSE)切換if語句,以檢查timeSince值是否小於或等於3,則可以實現所需的結果。 下面是地方你目前的使用三元的語句if一個:

(timeSince <= 3) ? $this.text(moment(postedDate).fromNow()) : $this.text(moment(postedDate).format('MMM Do YY'));

三元/條件語句首先需要評估一個條件-在您的情況下, timeSince是否小於或等於3天前。 如果條件為真,則執行第一個表達式-在這種情況下,使用Moment的x ago格式對.date選擇器中的值進行格式化。 如果條件為假(在此示例中為3天前),則它使用Moment使用MMM Do YY格式設置文本格式。

完整的CodePen示例在這里: https ://codepen.io/anon/pen/zjgbmp

有關三元如何保持代碼簡潔的示例,這是使用IF-ELSE的相同解決方案:

  if (timeSince <= 3) {
    $this.text(moment(postedDate).fromNow());
  }
  else {
    $this.text(moment(postedDate).format('MMM Do YY'));
  }

我們可以通過對代碼做兩件事來實現您想要的東西,首先將'day'傳遞給moment().diff()函數以獲取天數的差,然后使用與以下非常類似的三元語句檢查該值是否小於3 if

我已經整理了一些代碼以顯示我正在執行的5個步驟

  • 現在將時間存儲在循環之外
  • 從屬性獲取日期
  • 得到天的差異
  • 根據日期是否少於3天來格式化日期
  • 將該值附加到元素

 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM