묻고답하기

이 소스는 인터넷을 돌아다니다가 발견한 소스입니다. 

일단 PHP와 DB 연동에 대해서는 왕초보라고 생각하시면 될듯 합니다. 

 

이 소스를 이용하여 검색 단추를 어디다가 추가를 해야되는지.. 

그리고 시작일과 종료일을 DB 연동을 시켜야하는데. 

FORM ACTION 이라는것도 없어서 어떻게 넘겨줘야되며,(PHP확장자) 

PHP에서 시작일과 종료일을 변수로 넘겨야되는지.. 아니면.. PHP DB를 연동해야되는지 모르겠습니다. 

 

알려주시면 정말로 감사하겠습니다. ㅠ 

 

원소스 

------------------------------------------------------------------------------------ 

<!DOCTYPE html> 

<html> 

    <head> 

        <meta charset="UTF-8" /> 

        <title>jQuery UI</title> 

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/> 

 

        <style>    

        

            /* Default */ 

            input[type=text],input[type=password]{font-family:"Malgun Gothic","맑은 고딕",Dotum,"돋움",Arial,sans-serif} 

            *{margin:0;padding:0;font-family:"Malgun Gothic","맑은 고딕",Dotum,"돋움",Arial,sans-serif} 

            body{font-size:12px;color:#555;background:transparent;-webkit-user-select:none;-moz-user-select:none;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none} 

            ol,ul{list-style:none} 

            table{table-layout:fixed;width:100%;border-collapse:collapse;border-spacing:0} 

            caption{overflow:hidden;width:0;height:0;font-size:0;line-height:0;text-indent:-999em} 

            img,fieldset{border:0} 

            legend{height:0;visibility:hidden} 

            em,address{font-style:normal} 

            img{border:0 none;vertical-align:middle} 

            a{color:#555;text-decoration:none} 

            input,select{margin:0;padding:0;vertical-align:middle} 

            button{margin:0;padding:0;font-family:inherit;border:0 none;background:transparent;cursor:pointer} 

            button::-moz-focus-inner{border:0;padding:0} 

            header,footer,aside,nav,section,article{display:block} 

 

            .clearfix{*zoom:1} 

            .clearfix:after{content:"";display:block;clear:both;overflow:hidden} 

 

            /* Search */ 

            .searchBox{border:none} 

            .searchBox tbody th{padding:20px 10px 20px 35px;font-size:14px;font-weight:bold;text-align:left;vertical-align:top;border:none;background:#e6e6e6 } 

            .searchBox tbody td{padding:12px 10px 12px 25px;border:none;background-color:#efefef} 

        

            .searchDate{overflow:hidden;margin-bottom:10px;*zoom:1} 

            .searchDate:after{display:block;clear:both;content:''} 

            .searchDate li{position:relative;float:left;margin:0 7px 0 0} 

            .searchDate li .chkbox2{display:block;text-align:center} 

            .searchDate li .chkbox2 input{position:absolute;z-index:-1} 

            .searchDate li .chkbox2 label{display:block;width:72px;height:26px;font-size:14px;font-weight:bold;color:#fff;text-align:center;line-height:25px;text-decoration:none;cursor:pointer;background:#a5b0b6} 

            .searchDate li .chkbox2.on label{background:#ec6a6a} 

        

            .demi{display:inline-block;margin:0 1px;vertical-align:middle} 

            .inpType{padding-left:6px;height:24px;line-height:24px;border:1px solid #dbdbdb} 

            .btncalendar{display:inline-block;width:22px;height:22px;background:url(images/btn_calendar.gif) center center no-repeat;text-indent:-999em} 

 

 

        </style> 

 

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 

        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 

        <!-- datepicker 한국어로 --> 

        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ko.js"></script> 

    

        <script>                

 

        $(document).ready(function() { 

 

            //datepicker 한국어로 사용하기 위한 언어설정 

            $.datepicker.setDefaults($.datepicker.regional['ko']);    

        

            // Datepicker            

            $(".datepicker").datepicker({ 

                showButtonPanel: true, 

                dateFormat: "yy-mm-dd", 

                onClose : function ( selectedDate ) { 

                

                    var eleId = $(this).attr("id"); 

                    var optionName = ""; 

 

                    if(eleId.indexOf("StartDate") > 0) { 

                        eleId = eleId.replace("StartDate", "EndDate"); 

                        optionName = "minDate"; 

                    } else { 

                        eleId = eleId.replace("EndDate", "StartDate"); 

                        optionName = "maxDate"; 

                    } 

 

                    $("#"+eleId).datepicker( "option", optionName, selectedDate );        

                    $(".searchDate").find(".chkbox2").removeClass("on"); 

                } 

            }); 

 

            //시작일. 

            /*$('#searchStartDate').datepicker("option","onClose", function( selectedDate ) {    

                // 시작일 datepicker가 닫힐때 

                // 종료일의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정 

                $("#searchEndDate").datepicker( "option", "minDate", selectedDate ); 

                $(".searchDate").find(".chkbox2").removeClass("on"); 

            }); 

            */ 

 

            //종료일. 

            /*$('#searchEndDate').datepicker("option","onClose", function( selectedDate ) {    

                // 종료일 datepicker가 닫힐때 

                // 시작일의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정 

                $("#searchStartDate").datepicker( "option", "maxDate", selectedDate ); 

                $(".searchDate").find(".chkbox2").removeClass("on"); 

            }); 

            */ 

 

            $(".dateclick").dateclick();    // DateClick 

            $(".searchDate").schDate();        // searchDate 

            

        }); 

 

        // Search Date 

        jQuery.fn.schDate = function(){ 

            var $aaa = $(this); 

            var $chk = $aaa.find("input[type=radio]"); 

            $chk.click(function(){                

                $('input:not(:checked)').parent(".chkbox2").removeClass("on"); 

                $('input:checked').parent(".chkbox2").addClass("on");                    

            }); 

        }; 

 

        // DateClick 

        jQuery.fn.dateclick = function(){ 

            var $aaa = $(this); 

            $aaa.click(function(){ 

                $(this).parent().find("input").focus(); 

            }); 

        }    

 

        

        function setSearchDate(start){ 

 

            var num = start.substring(0,1); 

            var str = start.substring(1,2); 

 

            var today = new Date(); 

 

            //var year = today.getFullYear(); 

            //var month = today.getMonth() + 1; 

            //var day = today.getDate(); 

            

            var endDate = $.datepicker.formatDate('yy-mm-dd', today); 

            $('#searchEndDate').val(endDate); 

            

            if(str == 'd'){ 

                today.setDate(today.getDate() - num); 

            }else if (str == 'w'){ 

                today.setDate(today.getDate() - (num*7)); 

            }else if (str == 'm'){ 

                today.setMonth(today.getMonth() - num); 

                today.setDate(today.getDate() + 1); 

            } 

 

            var startDate = $.datepicker.formatDate('yy-mm-dd', today); 

            $('#searchStartDate').val(startDate); 

                    

            // 종료일은 시작일 이전 날짜 선택하지 못하도록 비활성화 

            $("#searchEndDate").datepicker( "option", "minDate", startDate ); 

            

            // 시작일은 종료일 이후 날짜 선택하지 못하도록 비활성화 

            $("#searchStartDate").datepicker( "option", "maxDate", endDate ); 

 

        } 

 

            

        </script> 

 

    </head> 

    <body> 

 

        <form> 

            

        <!-- search --> 

        <table class="searchBox"> 

            <caption>조회</caption> 

            <colgroup> 

                <col width="123px"> 

                <col width="*"> 

            </colgroup> 

            <tbody> 

                <tr> 

                    <th>조회기간</th> 

                    <td> 

                        <ul class="searchDate"> 

                            <li> 

                                <span class="chkbox2"> 

                                    <input type="radio" name="dateType" id="dateType1" onclick="setSearchDate('0d')"/> 

                                    <label for="dateType1">당일</label> 

                                </span> 

                            </li> 

                            <li> 

                                <span class="chkbox2"> 

                                    <input type="radio" name="dateType" id="dateType2" onclick="setSearchDate('3d')"/> 

                                    <label for="dateType2">3일</label> 

                                </span> 

                            </li> 

                            <li> 

                                <span class="chkbox2"> 

                                    <input type="radio" name="dateType" id="dateType3" onclick="setSearchDate('1w')"/> 

                                    <label for="dateType3">1주</label> 

                                </span> 

                            </li> 

                            <li> 

                                <span class="chkbox2"> 

                                    <input type="radio" name="dateType" id="dateType4" onclick="setSearchDate('2w')"/> 

                                    <label for="dateType4">2주</label> 

                                </span> 

                            </li> 

                            <li> 

                                <span class="chkbox2"> 

                                    <input type="radio" name="dateType" id="dateType5" onclick="setSearchDate('1m')"/> 

                                    <label for="dateType5">1개월</label> 

                                </span> 

                            </li> 

                            <li> 

                                <span class="chkbox2"> 

                                    <input type="radio" name="dateType" id="dateType6" onclick="setSearchDate('3m')"/> 

                                    <label for="dateType6">3개월</label> 

                                </span> 

                            </li> 

                            <li> 

                                <span class="chkbox2"> 

                                    <input type="radio" name="dateType" id="dateType7" onclick="setSearchDate('6m')"/> 

                                    <label for="dateType7">6개월</label> 

                                </span> 

                            </li> 

                        </ul> 

                        

                        <div class="clearfix"> 

                            <!-- 시작일 --> 

                            <span class="dset"> 

                                <input type="text" class="datepicker inpType" name="searchStartDate" id="searchStartDate" > 

                                <a href="#none" class="btncalendar dateclick">달력</a> 

                            </span> 

                            <span class="demi">~</span> 

                            <!-- 종료일 --> 

                            <span class="dset"> 

                                <input type="text" class="datepicker inpType" name="searchEndDate" id="searchEndDate" > 

                                <a href="#none" class="btncalendar dateclick">달력</a> 

                            </span> 

                        </div>    

                    </td> 

                </tr> 

 

            <tbody> 

        </table> 

        </form> 

    </body> 

 

</html>

 
태그 연관 글
  1. [2016/02/06] 묻고답하기 외부페이지에서 Google Map jquery 에러 해결방법 문의 by tohappy *2
글쓴이 제목 최종 글
BJ람보 공지 답변을 확실히 받기위한 질문자 지침서 [6] 2017.01.25 by mxin****
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [17] 2017.09.15 by 남기남
빨간사과 문서페이지에서 아이디 구하기 [2] 2018.08.20 by 빨간사과
곰돌씌 비회원 글작성시 홈페이지 이메일 삭제 [1] 2018.08.20 by Luatic™
박현우 웹마스터도구 제목이없는 웹페이지 해결법 부탁합니다 [1] file 2018.08.20 by Luatic™
railman 가상서버와 테라서버 그리고 클라우드에 관한 문의입니다. [1] 2018.08.20 by Luatic™
가르송 사이트가 크롬에서 주의요함이 뜹니다 ㅠㅠ [3] 2018.08.20 by Luatic™
산책이 코어 업그레이드 후 먹통 문제 [1] 2018.08.20 by Luatic™
카이클 XE관리자페이지 접속이 안됩니다. [1] 2018.08.20 by Luatic™
몬드 db 이전 후 에러가 떴습니다. 도와주세요. [2] 2018.08.20 by Luatic™
tigerdol 게시판 에디트 사용중 첨부파일에 대해서  
짱구삼촌 XE관리자페이지 접속에러 어떻게 해결 하나요? file  
정진 외부 페이지에서 게시물 생성 방법  
이여은 비회원 추천 비추천 가능 [2] 2018.08.17 by 이여은
광깔 layout.html 페이지에서 .. [1] 2018.08.16 by sejin7940
노는사람 사이트 등록후 제목 바꾸는법을 모르겠어요 [1] file 2018.08.16 by 디트리히A
달려라흰둥아 캐쉬파일이 너무 많이 생겨요. [1] 2018.08.16 by 디트리히A
레메 XE 제작 운영중인 커뮤니티 사이트 전체 백업 [2] 2018.08.16 by 레메
lun**** 레이아웃 설치 후 게시판에러 file  
면봉 XEDITION 레이아웃 상단 메뉴방 수정하는 방법 file  
재홍 스케치북5 에서 댓글이 아닌 답글 기능 추가 방법이 없나요? [1] 2018.08.15 by sejin7940
면봉 XEDITION 메뉴바를 변경하고 싶습니다 file  
이여은 회원가입에서 영문으로 변경 하고 싶어요 [2] file 2018.08.14 by 이여은
좋은사람임 이 소스를 이용하여 db연동 하는 소스 문의 [1] 2018.08.14 by 디자인클립
홈런볼11 신고자 출력 [1] 2018.08.14 by 디자인클립
면봉 XEDITION 레이아웃 메인 ico 질문 [1] file 2018.08.13 by pmacsoft
다빛 언어 변경시 나타나는 문제 [1] 2018.08.13 by pmacsoft
ILMARE 제로보드4에서 XE로 데이터이전시 회원목록이 안옴겨져요ㅠㅠ [2] 2018.08.13 by ILMARE
맘스퀸톡톡 긴급) 홈페이지가 에러떠서 안뜹니다.  
알싸라비아콜롬비아당 홈페이지 권한설정에 따른 에러 [1] 2018.08.12 by sejin7940
춥다 xedition 배경색 변경  
손주사랑 게시물 검색에 대하여 질문 드림니다 [2] 2018.08.10 by 손주사랑