티스토리 뷰
반응형
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/)
반응형
'JavaScript & jQuery' 카테고리의 다른 글
[JavaScript] Javascript에서 JSTL로 리스트 생성 (0) | 2021.04.12 |
---|---|
[JavaScript] 원하는 Date 포맷으로 출력 (YYYY-MM-DD HH:mm:ss) (5) | 2021.02.26 |
[JavaScript] form 태그 안에 동적으로 append된 파라미터 추가 (0) | 2021.02.26 |
[JavaScript] Date 객체로 다음 달 마지막 날 출력 (0) | 2021.02.25 |
[JSP] jstl로 현재날짜 및 현재시간 출력 (0) | 2021.02.25 |