[JQUERY] Datetimepicker 사용법 및 formValidation 적용하기

javascript 혹은 JQuery 로 날짜와 시간을 입력할 때, JQuery 플러그인을 이용할 수 있습니다.

Datetimepicker 라는 플러그인인데요, Datetimepicker를 사용하는 방법에 대해 알아보겠습니다.

또, Datetimepicker에 formValidation(유효성 검사)를 적용하는 방법도 알아보겠습니다.

 

 

---

 

1. formValidation 다운로드 및 사용법

formValidation 다운로드 및 사용법 알아보기

 

 

 

2. Datetimepicker 링크 참조

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">

 

 

3. HTML 예시 코드

<form id="set-registration-date" action="RegistrationController" method="post">

    <div class="form-group">
        <label for="date_start" class="control-label">시작일시</label>
        <div id="date_start">
            <input type="text" class="form-control" name="date_start">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar calendar-button-start"></span>
            </span>
        </div>

        <label for="date_end" class="control-label">마감일시</label>
        <div id="date_end">
            <input type="text" class="form-control" name="date_end">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    
    <button type="submit" class="btn btn-primary set-button">설정하기</button>
    
</form>

- 시작일시 id는 date_start, 마감일시 id는 date_end 입니다.

 

 

4. js 코드

// 기본 옵션
function DatetimepickerDefaults(opts) {
    return $.extend({},{
    locale: 'ko',
    format: 'YYYY-MM-DD HH:mm',
    inline: true,
    sideBySide: true
    }, opts);
}

// 개별 달력 옵션 설정
$('#date_start').datetimepicker(DatetimepickerDefaults({
    sideBySide: true
}));

$('#date_end').datetimepicker(DatetimepickerDefaults({
    sideBySide: true
}));

- DatetimepickerDefaults 함수를 만들어서 기본 옵션을 설정합니다.

- id 값을 가져와서 개별적으로 옵션을 설정 할 수도 있습니다.

 

 

5. Datetimepicker에 formValidation 적용하기

$(function () {

    $('#set-registration-date').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            date_start: {
                validators: {
                    notEmpty: {
                        message: '시작일시를 입력해 주십시오.'
                    },
                    date: {
                        format: 'YYYY-MM-DD HH:MM',
                        message: '일시를 YYYY-MM-DD HH:MM 형식으로 입력해 주십시오.'
                    }
                }
            },
            date_end: {
                validators: {
                    notEmpty: {
                        message: '마감일시를 입력해 주십시오.'
                    },
                    date: {
                        format: 'YYYY-MM-DD HH:MM',
                        message: '일시를 YYYY-MM-DD HH:MM 형식으로 입력해 주십시오.'
                    }
                }
            }
        }
    })
    .on('change', $('#date_start'), function() {
        fv = $('#set-registration-date').data('formValidation');
        fv.enableFieldValidators('date_start', true).revalidateField('date_start');
    })
    .on('change', $('#date_end'), function() {
        fv = $('#set-registration-date').data('formValidation');
        fv.enableFieldValidators('date_end', true).revalidateField('date_end');
    });

});

- date format 을 사용하여 날짜 포맷을 설정할 수 있습니다.

- 해당 포맷에 맞지 않으면 위에 설정한 메세지인 "일시를 YYYY-MM-DD HH:MM 형식으로 입력해 주십시오." 가 나타납니다.

 

- 아래 change 를 사용하여 datetimepicker를 사용하여 날짜를 선택했을 경우, validation을 다시 체크합니다.

 

 

 

이상으로 javascript, JQuery Datetimepicker를 활용하는 방법에 대해 알아보았습니다.

 

---