목동코딩,html, Ajax , <input type="date" > , 오늘 날자 설정과 날자 더하는 방법

목동코딩학원:

​

html5 에서 시작일자와 종료일자를 자동으로 관리할 필요가 생겼다.

시작일자를 설정하진 않으면 오늘 날자가 설정되고, 일주일 뒤를 종료일자로 설정하는 방식이 필요했다.

 

<div class="form-group text-left">
    <!-- 시작일자 -->
    <label for="StartDate" class="col-sm-12 text-left" style="padding-left:0;">시작일자</label>
    <input type="date" id="StartDate" name="StartDate" value="<?php echo($StartDate); ?>"
  class="form-control text-center" style="display:inline-block;">
</div>

<div class="form-group text-left">
	<!-- 종료일자 -->
	<label for="EndDate" class="col-sm-12 text-left" style="padding-left:0;">종료일자</label>
	<input type="date" id="EndDate" name="EndDate" disabled value="<?php echo($EndDate); ?>"
	class="form-control text-center" style="display:inline-block;">
</div>
<div class="form-group text-center">
	<button id="basicBtn" type="submit" class="btn btn-success btn-sm"
	style="width: 100%;">올리기</button>
</div>

<?php
   
    $StartDate = date("Y-m-d");//시작일자
    $EndDate = date("Y-m-d",strtotime("+6 day")); //종료일자
?>
   

$(document).ready(function() {
        $(document).on("change", "#StartDate", function() {
            var sDate = new Date($("#StartDate").val())
            var year = sDate.getFullYear();
            var month = ("0" + (1 + sDate.getMonth())).slice(-2);
            var day = ("0" + (sDate.getDate() + 6)).slice(-2);
            var eDate = year + "-" + month + "-" + day;

            $("#EndDate").attr("value", eDate);
            });
});

 

목동코딩학원

목동코딩학원, 양천구청 메타버스 체험현장