추가항목란 팝업달력으로 날짜입력

작성자	BuriBuri
분 류	응용
첨부#1	4_write_calendar.php (27KB) (Down:1232)

ㆍ조회: 14003 ㆍ추천: 10

ㆍ작성일: 2008년 6월 19일 목요일

추가항목란 팝업달력으로 날짜입력

제공되는 달력스크립으로 추가 항목에 달력팝업창으로 날짜 입력하기
      - js내용을  b_script/write.js 파일 제일 하단내에 추가하셔도 되지만 수정범위를
        줄이기위해 글쓰기파일(4_write.php)내에서만 수정하는 요령으로 설명드리며
       기존의 function TnT_open_calendar을 function TnT_open_calendar1로 변경
       추가하는것은 기존사용달력내용에 영향을 미치지 않기위해 새로이 function명만
       변경한것이므로 해당파일내에서 날짜입력형태나 달력형태(모양/색상)를 별도로
       수정적용하기 위함입니다.


[1] 각스킨빌더내 4_write.php파일을 새로운이름으로 복사추가 (예:4.write_calendar.php)
추가한파일(예:4.write_calendar.php)상단
<script language="JavaScript">안의 내용에 아래내용 추가

//이하 달력입력 추가라인
function TnT_open_calendar1(thisclick,y,m,yfld,mfld,dfld){
  if(!y){thisD=new Date(); y=thisD.getYear(); if(y<1000) y+=1900; if(!m)m=thisD.getMonth()+1;}
  tod_y=thisD.getFullYear(); tod_m=thisD.getMonth()+1; tod_d=thisD.getDate();
  var tmpHTML;
  var weekarr=new Array('<font color=#ff2222>S</font>','M','T','W','T','F','S');
  var chk_d=(y+(y-y%4)/4-(y-y%100)/100+(y-y%400)/400+m*2+(m*5-m*5%9)/9-(m<3?y%4||y%100==0&&y%400?2:3:4))%7;
  tmpHTML='<table width=170 height=140 bgcolor=#dddddd cellpadding=0 cellspacing=1 style="font-size:8pt; font-family:Tahoma;"><tbody style="background-color:#ffffff; padding:1 4 1 4"><tr><td align=right bgcolor=#dddddd colspan="7" style="font-size:10pt; font-family:Tahoma;"><nobr>';
  tmpHTML+='<img style="cursor:pointer;" title="year" src="'+TnTimgurl+'/board/arrow_left2.gif" align=absmiddle onclick="TnT_open_calendar(0,'+(y-1)+','+m+',''+yfld+'',''+mfld+'',''+dfld+'')">  ';
  tmpHTML+='<img style="cursor:pointer;" title="month" src="'+TnTimgurl+'/board/arrow_left.gif" align=absmiddle onclick="TnT_open_calendar(0,'+(m==1?(y-1)+','+12:y+','+(m-1))+',''+yfld+'',''+mfld+'',''+dfld+'')"> ';
  tmpHTML+='  <span title="close" style="font-weight:bold; font-size:8pt;">'+y+' . '+((m < 10) ? ('0' + m) : m)+'</span>   ';
  tmpHTML+='<img style="cursor:pointer;" title="month" src="'+TnTimgurl+'/board/arrow_right.gif" align=absmiddle onclick="TnT_open_calendar(0,'+(m==12?(y+1)+','+1:y+','+(m+1))+',''+yfld+'',''+mfld+'',''+dfld+'')">  ';
  tmpHTML+='<img style="cursor:pointer;" title="year" src="'+TnTimgurl+'/board/arrow_right2.gif" align=absmiddle onclick="TnT_open_calendar(0,'+(y+1)+','+m+',''+yfld+'',''+mfld+'',''+dfld+'')"> ';
  tmpHTML+='     <img style="cursor:pointer;" title="close" src="'+TnTimgurl+'/editor/bt_close.gif" align=absmiddle onclick="join_YMD_str()"> ';
  tmpHTML+='</nobr></td></tr><tr>';
  for (i=0; i < 7; i++) tmpHTML+='<td align=center style="font-weight:bold; font-size:7pt;">' + weekarr[i] + '</td>';
  for (i=0; i < 42; i++) {
   if (i%7==0) tmpHTML+='</tr><tr>';
   if (i < chk_d || i >= chk_d+(m*9-m*9%8)/8%2+(m==2?y%4 || y%100==0 && y%400 ? 28:29:30)) tmpHTML+='<td></td>';
   else{
    tmpHTML+='<td ';
    if((i+1-chk_d==tod_d) && m==tod_m && y==tod_y) tmpHTML+=' bgcolor=#ffddaa ';
    tmpHTML+=' onclick="join_YMD_str('+y+','+m+','+(i+1-chk_d)+','+yfld+','+mfld+','+dfld+')" onmouseover=this.style.backgroundColor="#dddddd" onmouseout=this.style.backgroundColor="" align=center style="cursor:pointer; color:' + (i%7?'#000000':'#ff2222') + '; font-size:8pt; font-family:Tahoma;">' + (i+1-chk_d) + '</td>';
   }
  }
  tmpHTML+='</tr></table>';
  calendarTmpLayer=document.getElementById('calendarTmpbox');
  if(!calendarTmpLayer){
   var tmpdiv=document.createElement('div');
   tmpdiv.setAttribute('id','calendarTmpbox');
   document.body.appendChild(tmpdiv);
   calendarTmpLayer=document.getElementById('calendarTmpbox');
   calendarTmpLayer.style.cssText='position:absolute; visibility:visible;';
  }
  calendarTmpLayer.innerHTML=tmpHTML;
  if(thisclick){
   calendarTmpLayer.style.visibility='visible';
   calendarTmpLayer.style.left=TnT_get_objLeft(thisclick)+20;
   calendarTmpLayer.style.top=TnT_get_objTop(thisclick)+20;
  }
}function join_YMD_str(y,m,d,yfld,mfld,dfld){
calendarTmpLayer.style.visibility = 'hidden'; if(!yfld) return;
if(m<10) m='0'+m; if(d<10) d='0'+d;
if(!mfld || !dfld){yfld.value=y+'-'+m+'-'+d+''; return;} //날짜입력형태
yfld.value=y; mfld.value=m; dfld.value=d;
}

function calendar_layeropen(this_click,filed_name){// 카렌다 open
TnT_open_calendar1(this_click,0,0,'document.TechnoteWriteForm.'+filed_name,0,0,-50,0);
}

[2]글쓰기 파일내 추가항목 적용 수정추가하기
수정할 파일 - a_standard/4_write.php 및 각빌더스킨 폴더내 글쓰기파일(4_write.php)이나
                     복사추가한파일

추가할부분
검색위치 "  "
내용중 추가항목 적용지정부분인
<?function WRITE_form_add1($Write_add_array){ global $Bconfig,$this_skin,$Take_value;?>
<tr>
   <td class=write_left_td><?=$Write_add_array[0]?></td>
   <td class=write_check_td><img src="<?=$this_skin.'/b_img/icons/'.$Write_add_array[1]?>"></td>
   <td class=write_right_td><?=$Write_add_array[2]?></td>
</tr>
<?}?>
부분이 보여질것입니다
이곳에 달력팝업을 적용할것입니다
보드설정 [6-16] 글쓰기 입력항목 추가 설정하기 에서 추가항목을 아래그림과 같은 요령으로 추가하였다면

예약일자 추가항목 add1만 추가한 예제입니다 add2추가 항목은 동일합니다

<?function WRITE_form_add1($Write_add_array){ global $Bconfig,$this_skin,$Take_value;?>
<tr>
   <td class=write_left_td><?=$Write_add_array[0]?></td>
   <td class=write_check_td><img src="<?=$this_skin.'/b_img/icons/'.$Write_add_array[1]?>"></td>
   <td class=write_right_td>
<input type=text readonly name='user_add1' value='<?=$Take_value[user_add1]?>' class=input_date
   onclick="calendar_layeropen(this,'user_add1')" style='cursor:pointer'>
   <img src='./img/admin/add/calendar.gif' align=absmiddle class=img_calendar
   onclick="calendar_layeropen(this,'user_add1')" style='cursor:pointer'>
</td>
</tr>
<?}?>

와 같이 수정변경 적용하시면

와 같이 달력팝업으로 단순하게 날짜 입력을 응용하실수 있습니다

저장된 글목록 입력형태

날짜의 입력형태는
if(!mfld || !dfld){yfld.value=y+'-'+m+'-'+d+''; return;} //날짜입력형태
부분의 '-' 안의 내용을 변경하시면 됩니다
변경예)
if(!mfld || !dfld){yfld.value=y+'년'+m+'월'+d+'일'; return;} //날짜입력형태 ->2008년06월19일
if(!mfld || !dfld){yfld.value=y+''+m+''+d+''; return;} //날짜입력형태 ->20080619
if(!mfld || !dfld){yfld.value=y+'/'+m+'/'+d+''; return;} //날짜입력형태 ->2008/06/19

마린보이

2008-06-19 10:10

선택된 답변입니다.
아! 예전에 올려주신 소스는 적용 못 하고 있었는데, 이건 더 활용도가 높은 것 같습니다.
부리부리 님, 감사합니다.
건강은 괜찮으시죠? ^^
항상 건겅하시길...


BuriBuri	ㅋ 전에것은 사용하시기 난해하셨을지도 여러개 있는데 이 요령이 제일 손이 안가는 요령일듯해서 마침 질문도 있고 하시기에 부랴부랴 이리저리 설명하려니 몇번을 내용설명을 수정해가면서 올려보네요 보이님도 하시는일 왕창잘되시기를 항상바랍니다 건강하시구요	6/19 10:16

바람준 2008-06-19 13:15	선택된 답변입니다. 음.....넘 감사하고, 죄송하고... 되네요...감사합니다. 먼 차이인지는 모르지만 고수의 내공이 느껴집니다. 다시 한번 감사드려요. 원하는 모양 나오면 다시 메모드려서 보여드리겠습니다. 오늘 하루 행복한..

여린왕자 2008-06-19 14:30	선택된 답변입니다. 엄청 학수고대하던 소스이네요^^ 감사히 사용하겠습니다~~~

바람준

2008-06-19 12:28

몇번 수정까지 해가면서 알려주시니 넘 감사하네요. 몇번 수정해가면서 write.php 스크립트 추가해가서 해보고 있습니다. 스크립트 에러가 나서 애먹고 있지만요...언젠가 되겠죠..^^;


BuriBuri	올려놓은파일로 테스트해보세요	6/19 12:56

여린왕자

2008-06-19 14:33

헉......저는 월을변경하는 조그마한 세모를 클릭하니까 안먹히네요~~
하단을 보니 오류라고 노란색으로 되어있는거 보니까~자바스크립트 오류가 있는듯 한데요??


BuriBuri	오류 url 부탁드립니다	6/19 16:00

바다비	1년이 지났습니다만,, 좋은 소스 감사드리고,, 혹여 저같이 많은 시간이 지나고 이 소스를 활용하시는 분들께.... 어린왕자님께서 말씀하신 오류라는거.. 위의 소스를 받아보면.. 이부분이 두군데 있습니다. onclick="TnT_open_calendar(0,'+( ==>onclick="TnT_open_calendar1(0,'+( 요렇게 1자만 하나 추가하시면 모든게 정상입니다.	10/27 10:52

마린보이

2008-06-19 16:05

지금 적용해 봤습니다. 잘 되네요. ^^
그런데,
var weekarr=new Array('<font color=#ff2222>일</font>','월','화','수','목','금','토');
형식으로 바꾼 다음에 '월'이나 '년' 이동 삼각형을 클릭하니, 다시
var weekarr=new Array('<font color=#ff2222>S</font>','M','T','W','T','F','S');
이렇게 바뀌네요... 이건 잡을 수 없을까요?

그리고, 전에 같은 질문을 드렸는데... 이번에도 동일 질문을 드려야 할 듯합니다.
----------------------
해당일을 클릭했을 때,
'2008년3월28일(금)' 이런 식으로 뒤에 '괄호 안에 요일'이 자동으로 나타나게 하려면 어떻게 해야할까요?
----------------------
http://technote.co.kr/php/technote1/board.php?board=skin&command=body&no=179&search=%B3%AF%C2%A5&shwhere=subject
여기에 드렸던 동일 질문입니다. ^^;;


BuriBuri	이전자료로는 마린님이 요구하는 부분들이 다 탑재되어 있습니다 현재달력 태클은 개발자님께 ㅎㅎㅎ	6/20 11:21

인의예지

2008-06-19 20:49

매우 유용한 팁이네요. 그렇지 않아도 필요하다고 생각하고 있었는데
BuriBuri님의 소스를 받아 적용해 보니 아주 잘 됩니다. 진심으로 감사드립니다.


BuriBuri	그저 작은부분이라도 도움이 되었으면 합니다	6/20 11:19

스데반

2008-06-20 01:15

우와 테크노트도 여타 보드들의 다양한 스킨에 점점 필적하네요.
부리부리님의 능력에 탄복하고 갑니다.
훌륭한 소스 공개에 진심으로 감사합니다.


BuriBuri	ㅡㅡ;전 능력없습니다 개발자님이 다 해놓은거 그저 우리함께 빼먹어요 개념이죠 ㅋ	6/20 11:13

홍두깨

2008-06-20 01:17

수고 많으셨습니다~


BuriBuri	수고는 두께님이 항상하시면서~ 팝업달력 유용한것들이 꽤있던데 올려드리면 이것저것 만질것이 많아 차라리 내장되어 있는 달력쓰는게 단순할것같아 올려보는데 마린보이님이 자꾸 태클거네요 ㅋㅋ	6/20 11:18

마린보이	ㅡ,.ㅡ;;;;	6/20 11:55

BuriBuri	ㅎㅎ;	6/20 12:04

이서비스 2008-06-22 14:14	우와 ~~ 정말좋습니다. 수고하셨습니다.

깨비

2008-06-24 09:18

달력이 이전 이후 년도로 넘어가질 않는데 다른분들은 괜찮은가요?


여린왕자	저도같은증상이 있어서 문의를 했는데요 69버젼의 테스트는 아직되지 않았다고 하네요~ 아마도 테스트 중이신걸로 알고있습니다^^	6/25 13:07

BuriBuri	7이하에서는 연동스크립이 아니기 때문에 이전에올린자료도 있지만 사용하기에 매끄러워보이지않아 7이하 버전에서도 이용할수있는 자료로 올려보겠습니다	6/27 16:00

바람준

2008-06-27 15:55

혹시 쇼핑몰 연동 체크해보셨나요? 저도 달,년 넘어가지 않아 고생했는데 부리부리님이 다시 체크해주셔서 되었답니다. 달,년 넘어가지 않는다면 체크해보세요.


BuriBuri	네 이건 연동을 활용한것이기 때문에 해당보드 이용시 설정[9-1]쇼핑몰연동 지정하세요	6/27 15:59

rororu 2008-07-06 20:21	흠...좀더 연구해봐야겠네염...아직 다들 뭔말하는지 모르겠다는;;

굼바 2008-10-19 16:17	소스 다운 받아 설치 해보았는데요 달력을 크릭 할수 있는 박스 조차 나오지 않네요

김은정

2008-10-29 04:53

달력 박스는 뜨는데.. 저는 7버전인데도 연도와 월이 안넘어가요.. 어느부분을 고쳐서 사용하고 계신가요? T.T


동경마당발	윗글 읽어 보셔야 할듯.. 같은 경험... 2시간 해매다.. 찾았음... 아까운 두시간...	2/23 21:48

산들 2010-04-06 15:31	유용한 자료네요, 고맙습니다~^^

김준곤 2011-11-25 17:29	정말 훌륭한 기능입니다. 덕분에 잘 활용하고 있습니다. 한 수 가르침을 받고 싶습니다. 저는 이 기능을 활용해서 강사들의 일지를 제출받고 있는데요, 옛날 일지를 슬쩍 끼워넣는 경우가 있어서, 혹시 오늘 기준으로 10일 이상이 지난 날짜는 아예 선택이 되지 않게하는 방법이 있을까요? 고수님들의 지도를 바랍니다.

본문 자동입력내용 마우스 클릭시 사라지게 하기

Re.. 이전, 이후 달력 안넘어가는 스크립트 오류문제