#44 Java Script JQuery UI datepicker, 날짜 계산

 2019.07.16

 

버튼 클릭시 날짜 계산

 

 

 

https://jqueryui.com/datepicker/

Datepicker | jQuery UI

 

 

 

 

Bootstrap이 아닌 JQuey UI를 이용하여 달력과 날짜 표시

 

<!-- ex) 날짜  -->
 
.
.
.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
.
.
.
<!-- 날짜 -->
<div>
    <input type = "text" id = "beginDate">
    ~
    <input type = "text" id = "endDate">
    <button id = "btnWeek"> 1주일 </button>
    <button id = "btnMonth"> 1개월 </button>
    <button id = "btn3Month"> 3개월 </button>
</div>
.
.
.
<script>
    // 시작 일자 달력 이미지 클릭시 달력 표기 
    $('#beginDate').datepicker({
        showOn: "button",
        buttonImage: "img/cal.png",
        buttonImageOnly: true,
        buttonText: "Select date"
    });  
    $('#beginDate').datepicker('option','dateFormat','yy-mm-dd'); // 기존 dd/mm/yy에서 yy-mm-dd로 format 변경    
 
    // 종료 일자 달력 이미지 클릭시 달력 표기    
    $('#endDate').datepicker({
        showOn: "button",
        buttonImage: "img/cal.png",
        buttonImageOnly: true,
        buttonText: "Select date"
    });
    $('#endDate').datepicker('option','dateFormat','yy-mm-dd');
  
    let d = new Date();
    let year = d.getFullYear();
    let month = d.getMonth() + 1; // 월은 0에서 시작하기 때문에 +1
    let day = d.getDate();  
    $('#beginDate').val(`${year}-${month}-${day}`);
    $('#endDate').val(`${year}-${month}-${day}`);
 
    // 버튼 클릭시 현재 날짜에서 1주일, 1개월, 3개월 더하기
    let endDate = d;
    $('#btnWeek').click(function(){
        $('#beginDate').val(`${year}-${month}-${day}`);
        endDate.setDate(endDate.getDate() + 7);
        $('#endDate').val(`${endDate.getFullYear()}-${endDate.getMonth()+1}-${endDate.getDate()}`);
        endDate.setDate(endDate.getDate() - 7); // 버튼 클릭 시 계속 더해지기 때문에 초기화
    });
    
    $('#btnMonth').click(function(){
        $('#beginDate').val(`${year}-${month}-${day}`);
        endDate.setMonth(endDate.getMonth() + 1);
        $('#endDate').val(`${endDate.getFullYear()}-${endDate.getMonth()+1}-${endDate.getDate()}`);
        endDate.setMonth(endDate.getMonth() - 1);
    });
 
    $('#btn3Month').click(function(){
        $('#beginDate').val(`${year}-${month}-${day}`);
        endDate.setMonth(endDate.getMonth() + 3);
        $('#endDate').val(`${endDate.getFullYear()}-${endDate.getMonth()+1}-${endDate.getDate()}`);
        endDate.setMonth(endDate.getMonth() - 3);
    });
</script>