Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

개발자 굿럭김의 블로그

datepicker 기간 버튼 만들기 본문

Javascript

datepicker 기간 버튼 만들기

개발자 굿럭김 2019. 5. 27. 17:07

버튼: 1일, 7일, 15일, 1개월, 3개월, 6개월, 1년

 

<script type="text/javascript">

    $(function() {
    
    	$(".dateclick").dateclick();    // DateClick
        $(".searchDate").schDate();
    });

// Search Date
    jQuery.fn.schDate = function(){
        var $obj = $(this);
        var $chk = $obj.find("input[type=button]");
        $chk.click(function(){
            $('input:not(:checked)').parent(".chkbox2").removeClass("on");
            $('input:checked').parent(".chkbox2").addClass("on");
        });
    };

    // DateClick
    jQuery.fn.dateclick = function(){
        var $obj = $(this);
        $obj.click(function(){
            $(this).parent().find("input").focus();
        });
    }  

// 기간 검색 버튼
    function setSearchDate(start){
        
    	var d = new Date();
    	const c = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1);
    	
    	var startDate = $.datepicker.formatDate('yy-mm-dd', d);
        $('#date2').val(startDate);
        
        if(start == '1d') {
            d.setDate(d.getDate() - 1)
        } else if(start == '7d') {
	    	var w = d.getDate();
            d.setDate(w - 7)
        } else if(start == '15d') {
            var w = d.getDate();
            d.setDate(w - 15)
        } else if(start == '1m') {
            var m = d.getMonth();
            d.setMonth(m - 1)
        } else if(start == '3m') {
            var m = d.getMonth();
            d.setMonth(m - 3)
        } else if(start == '6m') {
            var m = d.getMonth();
            d.setMonth(m - 6)
        } else {
        	var y = d.getFullYear();
        	d.setFullYear(y - 1)
        }
        
        var endDate = $.datepicker.formatDate('yy-mm-dd', d);
        $('#date1').val(endDate);
        
        $('#date1').datepicker();
        $('#date1').datepicker("option", "maxDate", $ ("#date2").val());
        $('#date1').datepicker("option", "onClose", function ( selectedDate ) {
            $("#date2").datepicker( "option", "minDate", selectedDate );
        });
     
        $('#date2').datepicker();
        $('#date2').datepicker("option", "minDate", $ ("#date1").val());
        $('#date2').datepicker("option", "onClose", function ( selectedDate ) {
            $("#date1").datepicker( "option", "maxDate", selectedDate );
        });
    }
    
</script>

<body>
<table>
<tr>
<th>기간</th>
<td colspan="3">
	<div class="dateBtn">
		<span class="chkbox2">
			<input type="button" name="dateType" id="dateType1" class="btn btn-default btn-sm" onclick="setSearchDate('1d')" value="1일"/>
		</span>
		<span class="chkbox2">
			<input type="button" id="seven" name="dateType" id="dateType2" class="btn btn-default btn-sm" onclick="setSearchDate('7d')" value="7일"/>
		</span>
		<span class="chkbox2">
			<input type="button" name="dateType" id="dateType3" class="btn btn-default btn-sm" onclick="setSearchDate('15d')" value="15일"/>
		</span>
		<span class="chkbox2">
			<input type="button" name="dateType" id="dateType4" class="btn btn-default btn-sm" onclick="setSearchDate('1m')" value="1개월"/>
		</span>
		<span class="chkbox2">
			<input type="button" name="dateType" id="dateType5" class="btn btn-default btn-sm" onclick="setSearchDate('3m')" value="3개월"/>
		</span>
		<span class="chkbox2">
			<input type="button" name="dateType" id="dateType6" class="btn btn-default btn-sm" onclick="setSearchDate('6m')" value="6개월"/>
		</span>
		<span class="chkbox2">
			<input type="button" name="dateType" id="dateType7" class="btn btn-default btn-sm" onclick="setSearchDate('1y')" value="1년"/>
		</span>
		<div><br></div>
		<div class="clearfix">
			<!-- 시작일 -->
			<span class="dset">
				<input type="text" class="datepicker inpType" name="startDate" id="date1" value="${sform.startDate}">
				<input type="button" id="dateBtn" class="btn btn-grey btn-sm" value="달력" onclick="$('#date1').datepicker('show');">
			</span>
			<span class="demi">~</span>
			<!-- 종료일 -->
			<span class="dset">
				<input type="text" class="datepicker inpType" name="endDate" id="date2" value="${sform.endDate}">
				<input type="button" id="dateBtn" class="btn btn-grey btn-sm" value="달력" onclick="$('#date2').datepicker('show');">
			</span>
			<button type="button" id="searchBtn" class="btn btn-default btn-sm">검색</button>
		</div>
	</div>
</td>
</tr>
</table>
</body>

'Javascript' 카테고리의 다른 글

[팝업] 자식창의 값을 부모창으로 전달하기  (0) 2019.05.27
다중 셀렉트박스 동적 생성  (0) 2019.05.27
'Javascript' Related Articles more