datepicker, daterangepicker를 이용한 날짜 컨트롤

오늘은 Jquery플러그인 중 날짜를 컨트롤할 수 있는 datepicker, daterangepicker에 대해 알아보겠습니다.

 

쉽게 말해서 달력을 띄워 원하는 날짜나, 원하는 날짜 범위를 지정할 수 있게 해주는 플러그인입니다.

 

<div class="col-sm-2">
  <div class="input-group">
  	<span class="input-group-addon">
  		<i class="fa fa-calendar bigger-110"></i>
  	</span>
  	<input type="text" id="datepicker" class="form-control col-xs-12" />
  </div>
</div>

먼저 달력을 넣어줄 input창을 만들어 줍니다.

이제 이 input창을 클릭하면 달력이 뜨게 만들어 줘야 합니다.

 

<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

datepicker를 사용하기 위해 필요한 js, css를 선언해 줍니다.

 

<script>
    $("#datepicker").datepicker();
</script>

그 다음 스크립트에서 위의 코드만 작성해주면 달력이 뜨게 됩니다.

이런식으로 달력이 뜨게 됩니다.

$("#datepicker").datepicker({
                dateFormat: 'yy-mm-dd', //날짜 표시 형식 설정
                showOtherMonths: true, //이전 달과 다음 달 날짜를 표시
                showMonthAfterYear:true, //연도 표시 후 달 표시
                changeYear: true, //연도 선택 콤보박스
                changeMonth: true, //월 선택 콤보박스                
                showOn: "both", //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
                yearSuffix: "년", //연도 뒤에 나오는 텍스트 지정
                monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'], 
                monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], 
                dayNamesMin: ['일','월','화','수','목','금','토'], 
                dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'],
                minDate: "-1M", // -1D:하루전, -1M:한달전, -1Y:일년전
                maxDate: "+1M", // +1D:하루후, -1M:한달후, -1Y:일년후
                buttonImage: "image/calendar.gif", //버튼에 띄워줄 이미지 경로
                buttonImageOnly: true, //디폴트 버튼 대신 이미지 띄워줌
                buttonText: "선택", //버튼 마우스오버 시 보이는 텍스트   
            });

옵션이 아주 다양하기 때문에 여러 설정을 해줄 수 있습니다.

 

다음은 daterangepicker를 사용해 보겠습니다.

 

역시 input창을 만들어줍니다.

<div class="col-sm-3">
	<div class="input-group">
		<span class="input-group-addon">
      		<i class="fa fa-calendar bigger-110"></i>
      	</span>
		<input class="form-control" type="text" name="date-range-picker" id="dateRangePicker">
	</div>
</div>

 

<link rel="stylesheet" href="dist/daterangepicker.min.css">
<script type="text/javascript" src="moment.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.daterangepicker.min.js"></script>

마찬가지로 daterangepicker를 사용하기 위해 js와 css를 선언해줍니다.

function FunGetFormatDate(date) {
    var year = date.getFullYear();                                 //yyyy
    var month = (1 + date.getMonth());                     //M
    month = month >= 10 ? month : '0' + month;     // month 두자리로 저장
    var day = date.getDate();                                        //d
    day = day >= 10 ? day : '0' + day;                            //day 두자리로 저장
    return month + '/' + day + '/' + year;
}

var defTom = FunGetFormatDate('내일날짜');
var defMon = FunGetFormatDate('한달뒤날짜');
$("#dateRangePicker").val(defTom + " - " + defMon);
$("#dateRangePicker").daterangepicker({
	'applyClass': 'btn-sm btn-success',
	'cancelClass': 'btn-sm btn-default',
	startDate: from,
	locale: {
	format: 'yyyy-mm-dd',
	applyLabel: 'Apply',
	cancelLabel: 'Cancel'
	},
	endDate: to
	}).prev().on(ace.click_event, function () {
		$(this).next().focus();
});
    

함수를 만들어서 호출해주면 끝입니다.

위의 함수에서 내일날짜, 한달 뒤 날짜는 현재날짜(ex)20190513)를 넘겨주면 됩니다.

 

이렇게 해서 달력 생성방법을 알아보았습니다.

 

아주 편리한 플러그인이니 활용할 데가 아주 많을 것 같습니다.