게시판형 웹사이트를 구현하다 보면 검색 시작일 ~ 검색 종료일을 검색할 때 datePicker로 많이 사용한다.
지난번 프로젝트 때 다 만들어 놓았던 util 함수였는데, 내부망이라서 코드를 다 날려버렸다.
새로 시작한 프로젝트에서도 비슷한 유형의 검색을 하게 되어 추후 사용할지도 몰라 업로드한다.🤣
/* utils.js */
let utlls = {
/**
* 기준일자 default 셋팅
* @param fromId
* @param toId
*/
searchDateSet : function (fromId = '#do_date', toId = '#do_date1') {
let nowDate = new Date();
let setMonth = (nowDate.getMonth()+1).toString();
let setDay = nowDate.getDay().toString();
let setDate = nowDate.getFullYear() + (setMonth < 10 ? '0' + setMonth : setMonth) + (setDay < 10 ? '0' + setDay : setDay); // yyyymmdd
if(fromId.indexOf('cpn_date') > Number(-1)) {
setDate = nowDate.getFullYear() + '/' + (setMonth < 10 ? '0' + setMonth : setMonth); // yyyy/mm
}
$(fromId).val(setDate);
$(toId).val(setDate);
},
/**
* 기준일자 데이트피커 포맷
* @param fromId : 기준시작일
* @param toId : 기준종료일
*/
datePickerFormat : function (fromId = '#do_date', toId = '#do_date1') {
if(fromId.indexOf('cpn_date') > Number(-1)){
$(fromId).datepicker({
dateFormat: 'yy/mm'
});
$(toId).datepicker({
dateFormat: 'yy/mm'
});
} else {
$(fromId).datepicker({
dateFormat: 'yymmdd'
});
$(toId).datepicker({
dateFormat: 'yymmdd'
});
}
},
/**
* 기준일자 value 체크
* @param fromId
* @param toId
* @param obj
*/
searchDateValidation : function (fromId = '#do_date', toId = '#do_date1', obj) {
let fromDate = $(fromId).val();
let toDate = $(toId).val();
if(fromDate.replace("/", "") && toDate.replace("/", "") && fromDate > toDate) {
if(obj.id.indexOf("1") == -1) { // 기준시작일
alert('기준시작일은 기준종료일보다 빠를 수 없습니다.');
$(fromId).val(toDate);
}else {
alert('기준종료일은 기준시작일보다 늦을 수 없습니다.');
$(toId).val(fromDate);
}
}
}
}utils.js를 따로 작성해 주었다. 게시판 형일 경우 비슷하게 날짜를 포맷하는 경우가 많아. 그 경우 파라미터에 default id를 지정해 준다. 포맷 형식이 다른 id는 if문을 사용. * default id값에 #을 포함하여 넣는건 추천하지 않는다. 초보인지라.. 더 좋은 방법이 생각나면 코드 수정을 할 예정....... 피트백도 좋습니다.
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript">
$(function() {
utlls.datePickerFormat('#cpn_date', '#cpn_date1');
utlls.searchDateSet('#cpn_date', '#cpn_date1');
});
</script>
<body>
<input type="text" id="cpn_date" readonly name="cpn_date" onchange="utlls.searchDateValidation('#cpn_date', '#cpn_date1', this);"> -
<input type="text" id="cpn_date1" readonly name="cpn_date1" onchange="utlls.searchDateValidation('#cpn_date', '#cpn_date1', this);">
</body>html 코드는 간략하게 작성하였다.
'IT > JavaScript' 카테고리의 다른 글
| chartjs-plugin-labels 라벨에 3자리수마다 콤마 설정하기(type:pie) (0) | 2022.10.28 |
|---|---|
| [JavaScript] JSON 안에 배열 추가, 배열 안에 JSON 추가 (0) | 2022.10.12 |
| [JQuery] 이미지 미리보기 / FileReader (0) | 2021.12.08 |
| [JavaScript] 정규식 util 함수 만들어서 사용하기! (feat. JQuery) (0) | 2021.11.30 |
| [JavaScript] window객체 정의 / 메서드 (0) | 2021.10.13 |