[AXBoot/javascript] Moment.js 라이브러리 사용해 날짜 계산하기

Moment.js : https://momentjs.com/

---

지금까지 배운 AXBoot 프레임워크를 이용해 라이트 PMS 프로젝트를 진행하고 있다.

아래는 프로젝트의 화면 정의서의 일부를 캡쳐한 것이다. 도착일과 출발일을 입력하면 숙박수가 계산되어 화면에 출력되고, 숙박수를 입력하면 출발일을 자동으로 계산해주는 기능을 구현해야 한다.

이 기능의 구현을 위해 moment 라이브러리를 사용한다. moment 라이브러리는 javascript에서 날짜 및 시간을 조작할 수 있는 라이브러리다. 나온지 오래된 라이브러리로 충분한 검증이 완료되어 사용하기에 아무 문제가 없다!!

moment 라이브러리 없이 기본으로 내장된 Date 개체를 이용해 구현을 해 보았으나, 코드의 길이가 매우 길어지고 가독성이 많이 떨어진다.

시작

라이브러리를 base 태그에 추가해주면 base layout을 가진 페이지에서 moment 라이브러리를 사용할 수 있게 된다.

---

도착일, 숙박일, 출발일을 jsp 페이지에 만들어준다.

                    <div data-ax-tr>
                        <div data-ax-td style="width:30%">
                            <div data-ax-td-label style="width:120px;">도착일</div>
                            <div data-ax-td-wrap>
                                <input type="date" data-ax-path="arrDt" title="도착일" class="form-control js-arrDt" data-ax-validate="required"/>
                            </div>
                        </div>
                        <div data-ax-td style="width:30%">
                            <div data-ax-td-label style="width:120px;">숙박수</div>
                            <div data-ax-td-wrap>
                                <input type="text" data-ax-path="nightCnt" title="숙박일" class="form-control js-nightCnt" data-ax-validate="required"/>
                            </div>
                        </div>
                        <div data-ax-td style="width:30%">
                            <div data-ax-td-label style="width:120px;">출발일</div>
                            <div data-ax-td-wrap>
                                <input type="date" data-ax-path="depDt" title="출발일" class="form-control js-depDt" data-ax-validate="required"/>
                            </div>
                        </div>
                    </div>

jquery를 이용해 도착일, 숙박일, 출발일의 변경을 확인하고 각각 함수를 호출한다.

fnObj.formView01 = axboot.viewExtend(axboot.formView, {
    calcDepDt: function (night) {
        console.log('call calcDepDt...');
        if (!night) return;
        var arrDt = $('.js-arrDt').val();
        if (!arrDt) return;
        if (night < 0 || night == 0) {
            axDialog.alert('1 이상의 숙박수를 입력하세요.', function () {
                $('[data-ax-path="nightCnt"]').val('').focus();
                $('[data-ax-path="depDt"]').val('');
            });
            return;
        }
        var depDt = moment(arrDt).add(night, 'day').format('yyyy-MM-DD');
        console.log('depDt', depDt);
        this.model.set('depDt', depDt);
    },
    calcNigth: function (Dt) {
        console.log('call calcNigth...');
        if (!Dt) return;
        var arrDt = $('.js-arrDt').val();
        var depDt = $('.js-depDt').val();
        if (!arrDt && !depDt) return;
        var night = moment(depDt).diff(moment(arrDt), 'days');
        if (night < 0) {
            axDialog.alert('도착일 이후의 날짜를 선택하세요.', function () {
                $('[data-ax-path="nightCnt"]').val('');
                $('[data-ax-path="depDt"]').val('').focus();
            });
            return;
        }
        this.model.set('nightCnt', night);
    },
    initView: function () {
        var _this = this; // fnObj.formView01
        _this.target = $('.js-form');
        this.model = new ax5.ui.binder();
        this.model.setModel({}, this.target);
        this.modelFormatter = new axboot.modelFormatter(this.model); // 모델 포메터 시작

        $('.js-nightCnt').on('change', function () {
            _this.calcDepDt($(this).val());
        });

        $('.js-depDt').on('change', function () {
            _this.calcNigth($(this).val());
        });

        $('.js-arrDt').on('change', function () {
            _this.calcNigth($(this).val());
        });
    },
});

calcDepDt 함수 호출 시 숙박일을 넘겨받는다. 숙박일이 없거나 도착일이 없으면 함수를 종료하고, 숙박일이 1일보다 작으면 alert를 출력한다.
조건에 부합하는 값이 들어왔을 때 드디어 moment를 이용한다.
Moment.js Docs를 참고하면 moment().add()를 이용해 날짜를 더할 수 있다.

년, 월, 일, 시간 모두 더할 수 있지만 여기서는 날짜를 구해야 한다.
moment(arrDt).add(night, 'day').format('yyyy-MM-DD');
도착일에 숙박일을 더해주고 yyyy-MM-DD 형태로 변환해 출발일에 바로 뿌려준다.

calcDepDt: function (night) {
        console.log('call calcDepDt...');
        if (!night) return;
        var arrDt = $('.js-arrDt').val();
        if (!arrDt) return;
        if (night < 0 || night == 0) {
            axDialog.alert('1 이상의 숙박수를 입력하세요.', function () {
                $('[data-ax-path="nightCnt"]').val('').focus();
                $('[data-ax-path="depDt"]').val('');
            });
            return;
        }
        var depDt = moment(arrDt).add(night, 'day').format('yyyy-MM-DD');
        console.log('depDt', depDt);
        this.model.set('depDt', depDt);
    },

출발일과 도착을을 이용해 숙박일을 구하는 것은 moment().diff()를 이용한다.

var night = moment(depDt).diff(moment(arrDt), 'days');

    calcNigth: function (Dt) {
        console.log('call calcNigth...');
        if (!Dt) return;
        var arrDt = $('.js-arrDt').val();
        var depDt = $('.js-depDt').val();
        if (!arrDt && !depDt) return;
        var night = moment(depDt).diff(moment(arrDt), 'days');
        if (night < 0) {
            axDialog.alert('도착일 이후의 날짜를 선택하세요.', function () {
                $('[data-ax-path="nightCnt"]').val('');
                $('[data-ax-path="depDt"]').val('').focus();
            });
            return;
        }
        this.model.set('nightCnt', night);
    },

도착일, 숙박일, 출발일의 값을 각각 변경하고 화면과 console을 확인한 결과 잘 작동하는 것을 볼 수 있었다.