[jQuery] placeholder에 오늘 날짜, 현재 시각 넣기

 

 

 

 

 

학원에 다니면서 HTML과 CSS를 배운지 약 한 달이 됐을 무렵,

첫번째 과제로 다른 친구와 둘이 사이트를 만든 적이 있었다.

 

주제를 선정하다가 콘텐츠가 풍부한 여행 예약 사이트(예를 들면 트립닷컴이나 마이 리얼 트립 같은)를 주제로 정해 구현했었는데

요즘 공부한 내용 복습 겸 그걸 조금 더 개선해서 다시 만들어보고 있다.

 

 

 

트립닷컴 메인 페이지 상단 검색창

 

 

여행 사이트의 핵심이라 하면 아무래도 메인 상단에 있는 이 검색창이라 할 수 있는데

지난번에 검색해서 찾은 jQuery를 사용한 탭메뉴 덕분에 탭 안에 탭을 넣는 부분까지는 쉽게 구현할 수 있었다.

[jQuery] 한 페이지에 탭메뉴 여러개 넣기

 

 

그런데 여기서 좀 더 욕심내고 싶었던 부분이 바로 저 빨간 박스 안의 날짜.

 

예전엔 input의 placeholder안에 임의의 날짜를 직접 작성해서 넣었는데

이번에는 기술적으로는 못 하더라도 보이는 부분만큼은 진짜 여행 예약 사이트와 같이

체크인에는 기본적으로 오늘 날짜가, 체크아웃에는 내일 날짜가 나오게 하고 싶었다.

 

(우선 관련 내용을 검색하다가 input type="date"가 IE에서는 안 된다는 사실을 알아서

input type="text"로 바꿔서 datepicker로 바꿔주고,

바꾸는 김에 input type="time"도 timepicker로 바꿔주었다.)

 

그래서 오늘도 폭풍 구글링, 구글링은 역시 진리다.👍

 

<script>
  $(document).ready(function(){
    //today in placeholder
    var date = new Date(),
        day = ['일','월','화','수','목','금','토'],
        dayToday = date.getDay(),
        curDay = day[dayToday],
        curTomorrow = day[dayToday+1];

    var today = ('0'+(date.getMonth()+1)).slice(-2) + '월 ' + ('0'+date.getDate()).slice(-2) + '일(' + curDay + ')';
    var tomorrow = ('0'+(date.getMonth()+1)).slice(-2) + '월 ' + ('0'+(date.getDate()+1)).slice(-2) + '일(' + curTomorrow + ')';

    $('.dateToday').attr('placeholder',today);
    $('.dateTomorrow').attr('placeholder',tomorrow);

    //current time in placeholder
    var time = date.getHours();
    if(time < 12){
    	var curTime = time%12 + ':00am';
    }else{
    	var curTime = time%12 + ':00pm';
    }
    $('.curTime').attr('placeholder',curTime);
  });
</script>

 

 

오늘 날짜를 구하는 jQuery소스를 찾아서 여기에 내가 필요한 부분만큼만 더했다.

 

요일 이름을 넣어주고, placeholder에도 요일 이름이 같이 뜨게끔 문자열을 추가하고

구한 값을 다시 placeholder에 넣어주는 정도.

 

시간은 분, 초 단위 없이 시간 + 오전/오후만 넣을 거라 코드가 비교적 간단했는데

여기서도 그냥 오전/오후의 구분과 문자열만 추가했다.

 

달랑 이렇게만 하는데도 .slice()라든지, 24시간을 12시간 + am / pm으로 표기하기,

요일 이름 바꾸기 등 모르던 걸 꽤 알 수 있었다.

 

 

그리고 결과.

체크인 날짜에 오늘 날짜가, 그리고 체크아웃 날짜에 내일 날짜가 나온 걸 볼 수 있다.

그리고 datepicker도 잘 작동하고 있다😁

 

마찬가지로 시각도 분 단위를 뺀 지금 시각으로, 12시간 단위로 잘 나온다.🥳