묻고답하기

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

일단 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
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
홍보미 버튼 이미지 경로?  
홍보미 문서페이지 설정을 고정 시킬수는 없을까요? [2] 2018.08.24 by 홍보미
먼지가되어 게시판 확장변수 시 에디터 사용안하고 보이지 않는 팁 요청드립니다.  
Vvale 메인 페이지를 게시판으로 사용하고 싶습니다. [1] 2018.08.24 by sejin7940
Vvale 링크의 meta태그를 읽어서 화면에 보여주는 모듈  
홍보미 첨부파일 전부 섬네일로 보이게 할수 있을까요?  
쏘쏘쏘 알림센터lite 알림오류 file  
가암자 사이트메뉴 편집 복사 여쭤봅니다. [1] 2018.08.23 by sejin7940
홍보미 글쓰기 오류 [2] file 2018.08.23 by 홍보미
xntjd**** 파일첨부가 안됩니다. 100% [7] 2018.08.23 by billy
tigerdol 게시판 에디트 사용중 첨부파일에 대해서 [1] 2018.08.22 by sejin7940
elancer 원하는 위치에 이미지 등록하기 (이미지함수?) [1] file 2018.08.22 by sejin7940
railman 가상서버와 테라서버 그리고 클라우드에 관한 문의입니다. [2] 2018.08.22 by 달나라
카이클 도대체 DB가부족하면 어디서 서버용량을 늘리는건가요 [1] 2018.08.22 by Luatic™
곰돌씌 비회원 글작성시 홈페이지 이메일 삭제 [3] 2018.08.22 by Luatic™
FreeSoft XE 설치  
몬드 db 이전 후 에러가 떴습니다. 도와주세요. [3] 2018.08.21 by 몬드
헬프미12 '상담기능' 적용시 문의  
ryan**** 새로운 도메인 주소에 자료이전 방법에 대해 궁금합니다^^ [2] 2018.08.21 by ryan****
이주연743 호스팅 이전할때 일단 XE 설치해야 되지요? [1] 2018.08.21 by Luatic™
빨간사과 문서페이지에서 아이디 구하기 [2] 2018.08.20 by 빨간사과
박현우 웹마스터도구 제목이없는 웹페이지 해결법 부탁합니다 [1] file 2018.08.20 by Luatic™
가르송 사이트가 크롬에서 주의요함이 뜹니다 ㅠㅠ [3] 2018.08.20 by Luatic™
산책이 코어 업그레이드 후 먹통 문제 [1] 2018.08.20 by Luatic™
카이클 XE관리자페이지 접속이 안됩니다. [1] 2018.08.20 by Luatic™
짱구삼촌 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