Moment.js-내일, 오늘, 어제


115

나는 moment().fromNow()기능을 원하지만 날짜가 가까워지면 너무 정확합니다. '3 시간 후'가 아니라 '오늘'을 표시하고 싶지 않습니다. 기본적으로 '매일'정밀도로 표시됩니다.

moment().calendar()기능을 사용해 보았는데 날짜 차이가 1 일 이상이면 포맷이되지 않습니다.

답변:


119

오늘과 내일과 어제의 날짜를 얻기 위해 이것을 할 수도 있습니다

let today     = moment();

let tomorrow  = moment().add(1,'days');

let yesterday = moment().add(-1, 'days');

이것은 공식 API에 없습니다! 이것을 위해 가지고있는 polyfill을 제공하십시오
Khaled Al-Ansari

여기에서 문서를 참조하십시오 momentjs.com/docs/#/manipulating/add 내가 추가하는 유일한 것은 new Date()lib가 나에게주는 경고를 피하는 것입니다 ( momentjs.com/docs/#/parsing/now 참조 )
HussienK

8
반대표에 대해 미안하지만 이것은 내가 요청한 것이 아닙니다. 나는 그것이 가장 많이 득표 한 답변이라는 것에 놀랐습니다 (작성하는 순간) ...
Ziarno

8
사실입니다. 질문의 제목이 어떻게 표현 되었기 때문에 여기에 올 수있는 저와 다른 사람들을위한 참고 자료로 추가했습니다. 많은 사람들에게 도움이 된 것 같습니다. :)
HussienK

2
new Date()필수? 나는 생각했다 moment()어쨌든 오늘 날짜를 사용하여 순간의 인스턴스를 생성
크레이그 마일스에게

37

를 사용하여 .fromNow.calendar메서드 가 모두 날짜를 표시 하는 방식을 사용자 지정할 수 있습니다 moment.updateLocale. 다음 코드는 .calendar질문에 따라 표시되는 방식을 변경합니다 .

moment.updateLocale('en', {
    calendar : {
        lastDay : '[Yesterday]',
        sameDay : '[Today]',
        nextDay : '[Tomorrow]',
        lastWeek : '[Last] dddd',
        nextWeek : '[Next] dddd',
        sameElse : 'L'
    }
});

질문에 따르면 .calendar방법이 더 적절할 것 같습니다 .fromNow. 과거 / 현재 접두사 / 접미사를 원하지만 더 많은 것을 알고 싶다면 http://momentjs.com 에서 문서를 읽을 수 있습니다 . / docs / # / customization / relative-time / .

당신이를 정의 할 때 로케일을 덮어 쓰는 대신 한 곳에서만이를 사용하려면 첫 번째 인수로 원하는 문자열을 전달 moment.updateLocale하고 해당 로케일을 사용해 달력 방법 호출 (예. moment.updateLocale('yesterday-today').calendar( /* moment() or whatever */ ))

편집 : Moment ^ 2.12.0에는 이제 updateLocale방법이 있습니다. updateLocalelocale기능적으로 동일하게 나타나며, locale아직 사용되지 있지만, 새로운 방법을 사용하는 대답을 업데이트되지 않습니다.


1
이 : 난 그냥 한 장소에 필요, 글로벌 현지화를 변경
Ziarno

편집을 참조하십시오 - 기존 로케일을 덮어 쓰는 사용자 정의 로케일을 대신 만들 수 있습니다
svangordon

35

나는 순간 add()과 의 조합을 사용합니다.endOf()

//...
const today = moment().endOf('day')
const tomorrow = moment().add(1, 'day').endOf('day')

if (date < today) return 'today'
if (date < tomorrow) return 'tomorrow'
return 'later'
//...

21

요구 사항 :

  • 날짜가 멀어지면 표준 moment().fromNow()기능을 사용하십시오 .
  • 날짜가되면 가까이, 쇼 "today", "yesterday", "tomorrow", 등

해결책:

// call this function, passing-in your date
function dateToFromNowDaily( myDate ) {

    // get from-now for this date
    var fromNow = moment( myDate ).fromNow();

    // ensure the date is displayed with today and yesterday
    return moment( myDate ).calendar( null, {
        // when the date is closer, specify custom values
        lastWeek: '[Last] dddd',
        lastDay:  '[Yesterday]',
        sameDay:  '[Today]',
        nextDay:  '[Tomorrow]',
        nextWeek: 'dddd',
        // when the date is further away, use from-now functionality             
        sameElse: function () {
            return "[" + fromNow + "]";
        }
    });
}

NB : 버전 2.14.0부터 캘린더 함수에 대한 형식 인수는 콜백이 될 수 있습니다 . http://momentjs.com/docs/#/displaying/calendar-time/을 참조 하십시오 .


19

이것을 사용할 수 있습니다 :


const today     = moment();

const tomorrow  = moment().add(1, 'days');

const yesterday = moment().subtract(1, 'days');

11

비슷한 솔루션이 있지만 로케일을 사용할 수 있습니다.

    let date = moment(someDate);
    if (moment().diff(date, 'days') >= 1) {
        return date.fromNow(); // '2 days ago' etc.
    }
    return date.calendar().split(' ')[0]; // 'Today', 'yesterday', 'tomorrow'

작동하지만 '> = 2'에 대해 '> = 1'을 변경하면 '1 일 전'대신 '어제'문자열이 표시됩니다.
Dody

10

2.10.5부터 moment는 호출 당 달력 출력 형식 지정을 지원합니다. 자세한 문서는 Moment-Calendar를 확인하십시오 .

**Moment 2.10.5**
moment().calendar(null, {
  sameDay: '[Today]',
  nextDay: '[Tomorrow]',
  nextWeek: 'dddd',
  lastDay: '[Yesterday]',
  lastWeek: '[Last] dddd',
  sameElse: 'DD/MM/YYYY'
});

2.14.0부터 달력은 값을 반환하기 위해 콜백을받을 수도 있습니다.

**Moment 2.14.0**
    moment().calendar(null, {
     sameDay: function (now) {
       if (this.isBefore(now)) {
         return '[Will Happen Today]';
       } else {
        return '[Happened Today]';
       }
       /* ... */
      }
    });

왜 downvotes? 제가이 ANS을 향상시킬 수 있도록 알려
pravin

이것이 답입니다.
oscarteg

이것이 제가 생각하는 정답입니다. 그러나 고도로 사용자 정의하지 않는 한 "3 일 전"유형 결과를 반환하지 않습니다.
Zortext

9

Moment.js에서 from () 메서드는 원하는 일일 정밀도 를가집니다 .

var today = new Date();
var tomorrow = new Date();
var yesterday = new Date();
tomorrow.setDate(today.getDate()+1);
yesterday.setDate(today.getDate()-1);

moment(today).from(moment(yesterday)); // "in a day"
moment(today).from(moment(tomorrow)); // "a day ago" 

moment(yesterday).from(moment(tomorrow)); // "2 days ago" 
moment(tomorrow).from(moment(yesterday)); // "in 2 days"

2
감사합니다.하지만 여전히 '오늘'을 표시하지 않고 예를 표시합니다. '1 일 전'대신에 '어제'- 기능성 I 필요 요구 같은 외모는 사용자 정의 할 수
Ziarno

1
from실제로 일일 정밀도가 없습니다. 예를 들어 어제가 4 시간 전이고 5 시간 전 시간을 선택하면 어제가 아니라 "5 시간 전"이라고 표시됩니다. 이 솔루션은 정밀도와 아무 상관이있다 from, 그러나 전달 된 날짜.
마이클 Mior

5

그래서 이것이 제가 결국

var dateText = moment(someDate).from(new Date());
var startOfToday = moment().startOf('day');
var startOfDate = moment(someDate).startOf('day');
var daysDiff = startOfDate.diff(startOfToday, 'days');
var days = {
  '0': 'today',
  '-1': 'yesterday',
  '1': 'tomorrow'
};

if (Math.abs(daysDiff) <= 1) {
  dateText = days[daysDiff];
}

저도 같은 문제를 가지고,하지만 난 국제화를 적용해야하고, 나는 ...을 momentJS 국제화에 의존 그래서 ... 10 개 언어를 가지고
Chexpir

3

.add () 및 .subtract () 메서드를 사용하여 어제와 내일 날짜를 가져올 수 있습니다. 그런 다음 format 메서드를 사용하여 날짜 만 가져옵니다 .format ( "D / M / Y"), D는 일, M은 월, Y는 연도를 나타냅니다.Moment 문서에서 확인

 let currentMilli = Date.now()
 let today = Moment(currentMilli).format("D/M/Y");
 let tomorrow = Moment(currentMilli).add(1, 'days').format("D/M/Y");
 let yesterday = Moment(currentMilli).subtract(1, 'days').format("D/M/Y");

결과는 다음과 같습니다.

Current Milli - 1576693800000
today - 19/12/2019
tomorrow - 18/12/2019
yesterday - 18/12/2019

3

순간 을 사용하여 수행하는 방법은 다음과 같습니다 .

  let today = moment().format('DD MMMM YYYY');

  let tomorrow = moment().add(1, 'days').format('DD MMMM YYYY').toString();

  let yesterday = moment().subtract(1, 'days').startOf('day').format('DD MMMM YYYY').toString();

1
const date = moment(YOUR_DATE)
return (moment().diff(date, 'days') >= 2) ? date.fromNow() : date.calendar().split(' ')[0]
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.