사용자 정의 형식이 적용되지 않습니다.

Question

라이브 피드를 표시하고 livestamp + 순간을 사용하여 Stackoverflow가 메시지에 수행하는 것과 비슷한 형식으로 시간을 업데이트하는 작은 애플리케이션으로 이동했습니다.

이제 다른 형식으로 24 시간이 지난 것을 보여주기 위해 약간 변경하고 싶습니다. 불행

I found this thread which was exactly what I was looking for

내 경우에는 작동하지 않습니다 내 요소의 예는 다음과 같다 : 물론

<div id="container"> 
<div something else> 
</div> 
<div id="feed"> 
    <div class="timestamp" title="Less than 1 minute ago">7 minutes ago</div> 
</div> 
</div> 

위 내 피드이기 때문에 livestamp이 그것을 수정 한 이후 jquery/ajax로 동적으로 추가되었습니다.

그래서 위의 고려 나는 다음과 같이 해당 코드를 변경 : 그러나 때문에 내 .timestamp이 동적으로 (내가 믿는) 추가되는에,

$('.timestamp').on('change.livestamp', function(event, from, to) 
{ 
    event.preventDefault(); // Stop the text from changing automatically 

    // Get the original timestamp out of the event 
    var originalTS = event.timeStamp; 
    // Make a new moment object to compare the timestamp to 
    var newDate = moment(); 
    // Use moment's .diff method to get the ms difference between timestamps 
    var delta = newDate.diff(originalTS); 

    // If the difference is less than a day's worth of ms 
    if (delta < 86400000){ 
     // Use formatted text provided by the change event 
     console.log("if: " + newDate.format("dddd M/D/YYYY")); 
     $(this).html(to); 
    } 
    else { 
     // Format the moment object with whatever moment format you want 
     console.log("Else: " + newDate.format("dddd M/D/YYYY")); 
     $(this).html(newDate.format("dddd M/D/YYYY")); 
    } 
}).livestamp(); 

그리고 내 $(document).ready(function() 내부를 추가, onchange를 트리거하지 않습니다.

대신 #container을 사용하면 트리거되며, 수동으로 업데이트하기 위해 모든 항목을 반복해야한다고 가정하고 타임 스탬프가 1 개의 항목에만 존재하기 때문에 문제가 있습니다. (항목 당 아닙니다)이 경우, 따라서 livestamp가 첫 번째 반복 후에 제거하는 타임 스탬프를 알 수 없습니다.

이 시나리오의 제안 된 코드 에서처럼 동적 요소를 올바르게 인식하고 요소 당 onchange를 수행 할 수있는 방법이 있습니까? 또는 나는 무엇인가 내려다보고 있냐?

아니면 livestamp.js에서 직접 맞춤식 서식을 설정할 수 있습니까? 같은

뭔가 : 당신이 livestamp 코드의 in line 59시피

var newDate = moment(); 
var delta = newDate.diff(to); 
if (delta >= 86400000) 
{ 
    to = to.format("dddd M/D/YYYY"); 
} 

After line 59 on moment.js?

Answer 1

라이브러리는 상대적으로 시간을 포맷하는 순간 fromNow를 사용합니다.

모멘트에는 상대 시간을 표시하는 방식을 사용자 정의하는 API가 있으며 문서의 Relative time 섹션에 설명되어 있습니다.

당신은 다음과 같은 코드를 사용할 수있는 경우 :

const CUSTOM_FORMAT = 'dddd M/D/YYYY'; 
 

 
moment.updateLocale('en', { 
 
    relativeTime : { 
 
    future: function (number, withoutSuffix, key, isFuture){ 
 
     if(moment(number, CUSTOM_FORMAT, true).isValid()){ 
 
     return number; 
 
     } 
 
     return "in " + number; 
 
    }, 
 
    past: function (number, withoutSuffix, key, isFuture){ 
 
     if(moment(number, CUSTOM_FORMAT, true).isValid()){ 
 
     return number; 
 
     } 
 
     return number + " ago"; 
 
    }, 
 
    dd: function (number, withoutSuffix, key, isFuture){ 
 
     var day = moment(); 
 
     if(isFuture){ 
 
     day.add(number, 'd'); 
 
     } else { 
 
     day.subtract(number, 'd') 
 
     } 
 
     return day.format(CUSTOM_FORMAT); 
 
    } 
 
    } 
 
});

<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.17.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/livestamp/1.1.2/livestamp.min.js"></script> 
 

 
<div id="container"> 
 
<div> something else 
 
</div> 
 
<div id="feed"> 
 
    <div class="timestamp" data-livestamp="2017-02-26T00:29:22+01:00"></div> 
 
    <div class="timestamp" data-livestamp="2017-02-20T00:29:22+01:00"></div> 
 
    <div class="timestamp" data-livestamp="2017-02-28T05:26:22+01:00"></div> 
 
</div> 
 
</div>

그것은 과거와 미래를 모두 날짜를 관리해야하지만,보다 차이가 더 큰 제대로 처리하기 위해 일부 내용을 변경해야 할 수도 있습니다 1 개월.