inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

스프링과 JPA 기반 웹 애플리케이션 개발

모임 조회

혹시 순수 자바스크립트로 구현하시고 싶으신분 계실까봐 남겨봅니다.

283

twosom
0

이런식으로 써주시면 제이쿼리 사용하지 않고도 해당 기능 사용할 수 있습니다~!

<div th:fragment="date-time">
<script src="/node_modules/moment/min/moment-with-locales.min.js"></script>
<script type="application/javascript">
(function () {
function momentFunction(e, localizedFormat) {
e.innerText = moment(e.textContent, 'YYYY-MM-DD`T`hh:mm').format(localizedFormat);
}

moment().format();
moment.locale('ko');

function searchElementAndMoment(elementName, localizedFormat) {
const element = document.querySelectorAll(elementName);
element.forEach(e => {
momentFunction(e, localizedFormat);
});
}

const elementMap = new Map();
elementMap.set('.date-time', 'LLL');
elementMap.set('.date', 'LL');
elementMap.set('.weekday', 'dddd');
elementMap.set('time', 'LT');
elementMap.set('.date-weekday-time', 'LLLL');

elementMap.forEach((localizedFormat, elementName) => {
searchElementAndMoment(elementName, localizedFormat);
});


const calendar = document.querySelectorAll('.calendar');
calendar.forEach(e => {
e.innerText = moment(e.textContent, 'YYYY-MM-DD`T`hh:mm').calendar();
});

const fromNow = document.querySelectorAll('.fromNow');
fromNow.forEach(e => {
e.innerText = moment(e.textContent, 'YYYY-MM-DD`T`hh:mm').fromNow();
});


}());
</script>
</div>

답변 1

0

Kevin

혹시 jQuery를 지양해야하는 이유가 있을까요? 예전 글이지만 혹시 보게된다면 답글한번 부탁드릴게요!