[JQuery] 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: "선택", //버튼 마우스오버 시 보이는 텍스트
});

$(id).daterangepicker({
    singleDatePicker:true,
    showDropdowns:true,
    format:nvl(format,'YYYY/MM/DD'),
    minDate: minDate,
    maxDate: maxDate,
    buttonClasses: ['btn btn-default'],
    applyClass: 'btn-sm btn-primary',
    cancelClass: 'btn-sm',
    locale:{
        applyLabel :"선택",
        cancelLabel:"취소",
        daysOfWeek:['일','월','화','수','목','금','토'],
        monthNames:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
        firstDay:0
    }
}, function (start, end, label) {
    //console.log(start.toISOString(), end.toISOString(), label);
    if(callback!=null){callback(this,start, end, label);}
});
if(searchDate != null){
    setDateParam(id,searchDate);
}