[JavaScript] 다수의 객체 $.extend()로 merge

 

datepicker를 여러번 사용하다보니 datepicker의 동일한 설정값을 중복해서 사용하는 경우가 발생한다.

$('#startAt').datepicker({
    dateFormat: 'yy-mm-dd',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    dayNames: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    showMonthAfterYear: true,
    selectOtherMonths: true,
    yearSuffix: '년',
    onClose: function(date) {
        const endAt = $('#endAt').val();
        $('#endAt').datepicker('option', 'minDate', date);
        $('#endAt').val(moment(endAt, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'));
    },
    onSelect: function(date) {
        $('#startAt').val(moment(new Date(date + ' 00:00:00'), 'YYYY-MM-DD').format('YYYY-MM-DD HH:mm:ss'));
    }
});

$('#endAt').datepicker({
    dateFormat: 'yy-mm-dd',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    dayNames: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    showMonthAfterYear: true,
    selectOtherMonths: true,
    yearSuffix: '년',
    onClose: function(date) {
        const startAt = $('#startAt').val();
        $('#startAt').datepicker('option', 'maxDate', date);
        $('#startAt').val(moment(startAt, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'));
    },
    onSelect: function(date) {
        $('#endAt').val(moment(new Date(date + ' 00:00:00'), 'YYYY-MM-DD').format('YYYY-MM-DD HH:mm:ss'));
    }
});

여기서 중복되는 설정 내용만 상단에 변수로 선언해준 후,

const datepickerSet = {
    dateFormat: 'yy-mm-dd',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    dayNames: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    showMonthAfterYear: true,
    selectOtherMonths: true,
    yearSuffix: '년'
};

jQuery 메소드 중 $.extend()를 사용해

jQuery.extend(object, object, ...);

객체를 결합해준다.

$('#startAt').datepicker($.extend(datepickerSet, {
    onClose: function(date) {
        const endAt = $('#endAt').val();
        $('#endAt').datepicker('option', 'minDate', date);
        $('#endAt').val(moment(endAt, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'));
    },
    onSelect: function(date) {
        $('#startAt').val(moment(new Date(date + ' 00:00:00'), 'YYYY-MM-DD').format('YYYY-MM-DD HH:mm:ss'));
    }
}));

$('#endAt').datepicker($.extend(datepickerSet, {
    onClose: function(date) {
        const startAt = $('#startAt').val();
        $('#startAt').datepicker('option', 'maxDate', date);
        $('#startAt').val(moment(startAt, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss'));
    },
    onSelect: function(date) {
        $('#endAt').val(moment(new Date(date + ' 00:00:00'), 'YYYY-MM-DD').format('YYYY-MM-DD HH:mm:ss'));
    }
}));

 

(참고 : api.jquery.com/jquery.extend/)