[jQuery prettyDate] 페이스북처럼 등록일 조금더 보기좋게 꾸미기

보통 우리는 게시판을 제작시, 2014-06-17 와 같은 형식으로 단순 표출을 한다.

우연히 소개할만한 플러그인들을 찾던도중 prettyDate 플러그인이 존재 하였다.

페이스북 경우 몇분전,몇시간전 등 눈에 조금더 보기 쉽게끔 처리를 해놓았다.

위사진을 보면 분/시간/어제/몇년전 등을 표출하기 쉽게 되있다!

더이상 게시판 목록 출력할때 2014-06-16 이런식의 게시물을 조금더 업그레이드 해보자!! 

우선 기존과 같이 파일을 다운로드 해보자

prettyDate download 및 데모사이트

http://bassistance.de/jquery-plugins/jquery-plugin-prettydate/

해당 주소에서 조금만 내리다 보면 Download 문구가 있다 클릭해서 파일을 받도록 하자!

압축을 풀면 폴더내에 jquery.prettydate.js 가 핵심이다! 

하지만 영문판이므로 한글판은 임의로 만들었다!

허접하지만 필요하신분은 사용하시길 .... 뭐 맘에 안드시면 변경하셔두 되구.. 

한글판 첨부파일

jquery.prettydate-kr.js

그럼 프로젝트 생성하시고 pretty_date 폴더 생성하여 

그 하단에 

jquery.prettydate.js와 첨부한  jquery.prettydate-kr.js

를 넣고 진행하자

include 되야 할 파일은 상단 2개 전에 추가로 jquery.js파일도 include해줘야 한다.

jquery 파일이 없으신분은 CDN을 이용하시길...

우선 JAVA/JSP/PHP등 방식은 같지만 문법이 틀리니까 해당 포맷팅 부분은 언어별로 작성하시길..

본인은 index.jsp를 생성하고 상단에 스크립트릿으로 해당 소스를 작성했다.

//UTC 타임존설정
//해당 UTC 형식으로 포맷을 해줘야한다. 
TimeZone tz = TimeZone.getTimeZone("UTC");
DateFormat df = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss'Z'");
df.setTimeZone(tz);

SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

//임의의 데이터 목록이다. 
//게시판의 등록일이라 가정하자
ArrayList<Date> list = new ArrayList<Date>();
list.add(format.parse("2014-06-17 23:33:35"));
list.add(format.parse("2014-06-17 22:33:35"));
list.add(format.parse("2014-06-17 21:33:35"));
list.add(format.parse("2014-06-17 20:33:35"));
list.add(format.parse("2014-06-16 20:33:35"));
list.add(format.parse("2014-05-17 20:33:35"));
list.add(format.parse("2013-05-17 20:33:35"));

다음은 자바스크립트 부분이다.

$(function(){
		//등록일이 표출되는 컬럼부
	        $('td.prettydate').prettyDate({
		//true일경우 1분마다 갱
		interval: true
	});
});

마지막으로 body태그내에 table태그를 이용하여 등록일 row를 arrayList에 담은 임의의 날짜를 뽑아보도록 하겠다.

body태그 부분이다.

<table>
		<%
			for(Date d : list) {
		%>
		<tr>
			<td class="prettydate" title="<%=df.format(d)%>"></td>
		</tr>
		<%
			}
		%>
</table>

위의 소스를 통합하여 실행한 결과화면이다!!

잘만 응용하면 페북따라하기 참~쉬울듯!!

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!