Calendar 기능을 구현하고 싶습니다.

Calendar 기능을 구현하고 싶습니다.

QA

Calendar 기능을 구현하고 싶습니다.

본문

사진 보시면 네모칸을 클릭하면 달력이 나와서 여기서 원하는 날짜 선택하면 네모칸 안에 날짜가 나오게 기능을 구현하고 싶은데

제가 알기로는 따로 js 다운 을 해야 한다고 들었거든요.. 프로그램같이  

여러가지 종류가 있다는데 조언 부탁드립니다.ㅠ.ㅠ 



4b1a08855b58ff7959188527d0d049e0_1404278405_1964.JPG 

이 질문에 댓글 쓰기 :

답변 3

<input type="text" name="wr_10" value="<?php echo $write['wr_10'] ?>" id="fr_date" required class="frm_input" size="11" maxlength="10">

여분필드로 이렇게 값을 주시고

스크립트에

$(function(){

    $("#fr_date, #to_date").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", showButtonPanel: true, yearRange: "c-99:c+99", maxDate: "+0d" });

});
추가를 해주세요.


최상단에는

include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php');
인쿠르드는 필수 입니다.

jQuery UI가 편하지 않나요?
그누보드4 회원가입에 아마 달력이 있을테니
그걸 참고해 보시는 것도...ㅎ

jQuery UI의 datepicker가 가장 쉽고 유용하긴 합니다.

 

근데, 조금 생각해보면 PHP로도 쉽게 구현 할 수 는 있습니다.  

다양하게 활용할 목적으로 최근에 PHP로 제작을 해봤는데, 자바스크립트로 만드는 것보다 쉽더라구요.  

그래도  datepicker로 사용할 거라면,  javascript나  jQuery를 어느정도 함께 사용해야 할 듯 합니다.  

 

PHP로 구현하는 로직을 설명 드리면, 

1. 42개의 셀을 만듭니다.(42개로 만드는 이유는 달력에서 최대로 필요한 공간 입니다. 6주 - 1주, 마지막 주가 정확하게 월, 일로 끝나지 않기 때문에...)

 

2. 처음 시작하는 요일을 구합니다. php의 date 함수에서 'w'옵션을 사용하시면 0~6의 숫자로 요일을 가져올 수 있습니다.  

   처음 시작하는 날자 (예) 2014-07-01)로 시작하는 stamp 값을 mktime을 사용하여 구합니다.  

   예) $first_day_stamp = mktime(0,0,0, 7, 1, 2014);

   달력은 한달 단위로 계속 변해야 하니깐 stamp를 구하는 함수를 만드는 것이 좋습니다.  

    Stamp가 구해졌다면, 다음과 같이 요일을 구합니다.  

 

   $start_day = date('w', $first_day_stamp);   

 

3. 마지막 끝나는 날을 구합니다.  

    마지막 끝나는 날은 다음달 첫날(예) 2014-08-01)을 stamp로 만든다음 하루만큼(60 * 60 * 24)를 빼주면 됩니다.  그런 다음 다시 날짜로 변환 합니다.  

   예) $last_day_stamp = mktime(0,0,0, 8, 1, 2014) - (60 * 60 * 24 );

         $last_date = date('d', $last_day_stamp);

 

4. 여기 까지 했다면 달력을 출력할 준비가 되었습니다.  

   달력을 출력 해보면

 

예)

 <div>

<div>일</div>

<div>월</div>

<div>화</div>

<div>수</div>

<div>목</div>

<div>금</div>

<div>토</div> 

</div> 

  for ( i = 0; $i < 42; $i++ ) {  

        if ( $i % 7 == 0 ) echo "<div>";

         

         if ( $i < $start_day ) echo "<div></div>"; // 1일이 시작하는 요일이 일요일이 아닌 경우는 처음 시작하는 요일이 될 때 까지 공백을 출력하고

         else {   

                if ( $i > $last_date + start_day + 1) { // 마지막 날 이후는 공백으로 출력

                      echo "<div></div>"; 

                } else {

                     echo "<div>".($i - $start_day + 1 )."</div>"; 

                } 

                   } 

 

                  if ( $i % 7 == 6 ) echo "</div>"; 

                      }

 

      위와 같이 구성을 한다면(실제로 테스트를 해보지 않아서 에러가 있을 수도 있습니다.) 대강 달력 출력은 될 듯 합니다.  

   

    datepicker와 같이 이벤트 처리를 해야 한다면, 각 셀의 div에 id 또는 다른 생성한 attribute에  날짜값을 부여하고( 예) id = '2014-07-20' 또는 date='2014-07-20'으로 정하고  

   jQuery나 javascript를 통해서 그 값을 가져오고 지정된 input text 박스에 값을 부여해 주면 될 듯 합니다.  

 

  

답변을 작성하시기 전에 로그인 해주세요.
전체 123,162 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT