인간 친화적 인 상대 날짜 형식을위한 자바 스크립트 라이브러리

사람에게 친숙한 형식으로 현재 날짜를 기준으로 일부 날짜를 표시하고 싶습니다.

인간 친화적 인 상대 날짜의 예 :

• 10 초 전
• 지금부터 20 분
• 1 일 전
• 5 주전
• 2 달전

기본적으로 가장 높은 등급을 충실히 보존합니다 (그리고 선호도에 따라 해당 단위 중 2 개를 통과 할 때만 단위 이동-1 개월 대신 5 주).

통제력이 약하고 다음과 같은 친근한 날짜를 가진 도서관에서 살 수는 있지만

• 어제
• 내일
• 지난주
• 몇 분 전
• 몇 시간 안에

이것에 대한 인기있는 도서관이 있습니까?

이 답변을 작성했기 때문에 사용 가능한 잘 알려진 라이브러리는 moment.js 입니다.

있습니다 가능한 라이브러리는 있지만, 스스로를 구현하기 간단하다. 몇 가지 조건을 사용하십시오.

비교하려는 시간에 대해 date인스턴스화 된 Date객체라고 가정합니다 .

// Make a fuzzy time
var delta = Math.round((+new Date - date) / 1000);

var minute = 60,
    hour = minute * 60,
    day = hour * 24,
    week = day * 7;

var fuzzy;

if (delta < 30) {
    fuzzy = 'just then.';
} else if (delta < minute) {
    fuzzy = delta + ' seconds ago.';
} else if (delta < 2 * minute) {
    fuzzy = 'a minute ago.'
} else if (delta < hour) {
    fuzzy = Math.floor(delta / minute) + ' minutes ago.';
} else if (Math.floor(delta / hour) == 1) {
    fuzzy = '1 hour ago.'
} else if (delta < day) {
    fuzzy = Math.floor(delta / hour) + ' hours ago.';
} else if (delta < day * 2) {
    fuzzy = 'yesterday';
}

미래 날짜를 처리하려면이를 조정해야합니다.

이 작업을 수행하는 날짜 라이브러리 인 moment.js를 작성 했습니다. 약 5KB (2011) 52KB (2019)이며 브라우저와 Node.js에서 작동합니다. 또한 JavaScript를위한 가장 인기 있고 유명한 날짜 라이브러리 일 것입니다.

timeago, 형식화, 구문 분석, 쿼리, 조작, i18n 등을 지원합니다.

과거 날짜에 대한 Timeago (상대 시간)는 moment().fromNow(). 예를 들어 2019 년 1 월 1 일을 timeago 형식으로 표시하려면 :

let date = moment("2019-01-01", "YYYY-MM-DD");
console.log(date.fromNow());

<script src="https://momentjs.com/downloads/moment.min.js"></script>

timeago 문자열은를 사용하여 사용자 정의 moment.updateLocale()할 수 있으므로 원하는대로 변경할 수 있습니다.

컷오프는 질문이 요청하는 것 ( "5 주"대 "1 개월")이 아니지만 어떤 문자열이 어떤 시간 범위에 사용되는지에 대해 문서화됩니다.

다음은 John Resig의 내용입니다-http: //ejohn.org/blog/javascript-pretty-date/

수정 ( 2014 년 6 월 27 일) : Sumurai8 의 댓글에 대한 후속 조치 -링크 된 페이지는 여전히 작동하지만 pretty.js위의 기사에서 링크 된에 대한 발췌는 다음 과 같습니다.

pretty.js

/*
 * JavaScript Pretty Date
 * Copyright (c) 2011 John Resig (ejohn.org)
 * Licensed under the MIT and GPL licenses.
 */

// Takes an ISO time and returns a string representing how
// long ago the date represents.
function prettyDate(time) {
    var date = new Date((time || "").replace(/-/g, "/").replace(/[TZ]/g, " ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);

    if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31) return;

    return day_diff == 0 && (
    diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor(diff / 60) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor(diff / 3600) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 7 && day_diff + " days ago" || day_diff < 31 && Math.ceil(day_diff / 7) + " weeks ago";
}

// If jQuery is included in the page, adds a jQuery plugin to handle it as well
if (typeof jQuery != "undefined") jQuery.fn.prettyDate = function() {
    return this.each(function() {
        var date = prettyDate(this.title);
        if (date) jQuery(this).text(date);
    });
};

용법:

prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"
prettyDate("2007-12-15T22:24:17Z") // => undefined

사용법에 관한 기사에서 발췌 :

사용 예

다음 예제에서는 제목에 날짜가있는 모든 앵커를 내부 텍스트로 예쁜 날짜로 만듭니다. 또한 페이지가로드 된 후 5 초마다 링크를 계속 업데이트합니다.

JavaScript 사용 :

function prettyLinks(){
    var links = document.getElementsByTagName("a");
    for ( var i = 0; i < links.length; i++ )
        if ( links[i].title ) {
            var date = prettyDate(links[i].title);
            if ( date )
                links[i].innerHTML = date;
        }
}
prettyLinks();
setInterval(prettyLinks, 5000);

jQuery 사용 :

$("a").prettyDate();
setInterval(function(){ $("a").prettyDate(); }, 5000);

Faiz : 원본 코드, 버그 수정 및 개선 사항을 일부 변경했습니다.

function prettyDate(time) {
    var date = new Date((time || "").replace(/-/g, "/").replace(/[TZ]/g, " ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);
    var year = date.getFullYear(),
        month = date.getMonth()+1,
        day = date.getDate();

    if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31)
        return (
            year.toString()+'-'
            +((month<10) ? '0'+month.toString() : month.toString())+'-'
            +((day<10) ? '0'+day.toString() : day.toString())
        );

    var r =
    ( 
        (
            day_diff == 0 && 
            (
                (diff < 60 && "just now")
                || (diff < 120 && "1 minute ago")
                || (diff < 3600 && Math.floor(diff / 60) + " minutes ago")
                || (diff < 7200 && "1 hour ago")
                || (diff < 86400 && Math.floor(diff / 3600) + " hours ago")
            )
        )
        || (day_diff == 1 && "Yesterday")
        || (day_diff < 7 && day_diff + " days ago")
        || (day_diff < 31 && Math.ceil(day_diff / 7) + " weeks ago")
    );
    return r;
}

sugar.js 에는 훌륭한 날짜 형식 지정 기능이 있습니다.

뿐만 아니라 사용하기 편리한 문자열 서식, 숫자 서식 등과 같은 일반적인 범용 기능도 제공합니다.

여기 설탕 대 순간의 예 : 주를 표시하는 달력의 경우 마지막 월요일 값이 필요했습니다.

moment.js

var m = moment().subtract("days", 1).sod().day(1) // returns a "moment"

sugar.js

var d = Date.past("monday") // returns a js Date object

나는 설탕을 훨씬 선호하고 moment.js를 몇 달 후에 이제 sugar.js로 전환합니다. 더 명확하고 Javascripts의 Date 클래스와 잘 통합됩니다.

OP 케이스는 두 라이브러리 모두에서 다루며 sugar.js의 경우 http://sugarjs.com/dates를 참조 하십시오.

이 js 스크립트는 매우 좋습니다. 당신이해야 할 일은 그것을 실행하는 것입니다. 모든 <time>태그는 상대 날짜로 변경되고 몇 분마다 업데이트되므로 상대 시간은 항상 최신 상태로 유지됩니다.

http://timeago.yarp.com/

http://www.datejs.com/을 사용할 수있는 것 같습니다 .

그들은 당신이 설명하는 것을 정확하게 수행하는 메인 페이지에 예제가 있습니다!

편집 : 사실, 나는 내 머리에서 당신의 질문을 뒤집 었다고 생각합니다. 어쨌든 정말 대단한 도서관이기 때문에 꼭 확인하실 수있을 것 같아요!

x2 편집 : 다른 사람들이 http://momentjs.com/ 이 현재 사용 가능한 최선의 선택 이라고 말한 것을 반영하겠습니다 .

x3 편집 : 1 년 넘게 date.js를 사용하지 않았습니다. 나는 모든 데이트 관련 요구에 대해 momentjs를 독점적으로 사용하고 있습니다.