묻고답하기

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

일단 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 남기남
박병수 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [3] 2007.08.10
+세희+ 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
한순영 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [3] 2007.08.10
임록경 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
권호일 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요?  
김동기 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
Congdak:) 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [2] 2007.08.10
이상훈 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
Research 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요?  
정윤호 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요?  
김정훈 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [2] 2007.08.10
김재영 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
따삼 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
이동진 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
은새정 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [2] 2007.08.10
이수호 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [3] 2007.08.10
시아유키 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요?  
기마병 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요?  
함찬규 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요?  
안용배 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
Xeicia 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [5] 2007.08.10
초보에요55 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
한가람78 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [2] 2007.08.10
이민재 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
쥬크하양이 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [3] 2007.08.10
서린맘 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
머리 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요? [1] 2007.08.10
gamequit 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요?  
안용배 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요?  
한승진 회원가입시나 수정시 닉네임/ID /E-mail 은 중복체크를 하자나요 . 이름도 가능할까요?