참고 : https://datatables.net/extensions/datetime/examples/integration/datatables.html
DataTables 에 일반 검색이 아닌 날짜 range 로 검색해야할때 사용하는 방법이다.
또한 input type="date" 에 날짜 라이브러리인 datepicker 를 사용했다.
$(document).ready(function(){}) 위 쪽에 아래와 같이 작성한다.
<script th:inline="javascript">
let table_consts = null;
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
let searchStartDate = new Date($("#dateStart").val()+"T00:00:00");
let searchEndDate = new Date($("#dateEnd").val()+"T00:00:00");
let startDate = new Date(data[1]);
let endDate = new Date(data[2]);
if (
(searchStartDate <= startDate) && (searchEndDate <= endDate)
) {
return true;
}
return false;
}
);
$(document).ready(function(){
...
})
</script>
$.fn.dataTable.ext.search.push()
https://datatables.net/manual/plug-ins/search#Plug-in-structure
위 DataTables Document 를 확인해보면 DataTables 에서 제공해주는 검색을 위한 API라고 한다.
search() API 검색 기능을 통해 각 Column 에 접근하여 검색할 수 있도록 API 기능을 제공한다.
searchStartDate
검색 시작날짜이며 new Date 를 통해 String 형 날짜를 Date 로 변경했다.
"T00:00:00" 을 붙인 이유는 dataTables 에 보여지는 날짜는 시간까지 포함이고 선택하는 datepicker 날짜는
날짜만 선택하기 때문에 맞춰주기 위하여 붙인거다.
searchEndDate
검색 종료날짜이며 new Date 를 통해 String 형 날짜를 Date 로 변경했다.
"T00:00:00" 을 붙인 이유는 dataTables 에 보여지는 날짜는 시간까지 포함이고 선택하는 datepicker 날짜는
날짜만 선택하기 때문에 맞춰주기 위하여 붙인거다.
startDate
DataTables 에 보여지는 시작 날짜
endDate
DataTables 에 보여지는 종료 날짜
(searchStartDate <= startDate) && (searchEndDate <= endDate)
searchStartDate는 검색의 시작날짜를 정하는 변수이며 해당 변수보다 크거나 같도록 설정한다.
searchEndDate는 종료날짜보다 작거나 같도록 설정해 검색한다.
아래는 $(document).ready(function(){}) 안의 내용이다.
<script th:inline="javascript">
let table_consts = null;
$.fn.dataTable.ext.search.push( .... )
$('#dateStart').datepicker({
changeMonth : true,
changeYear : true,
selectOtherMonths : true,
showButtonPanel : true,
yearRange : "c-0:c+0",
dateFormat : "yy-mm-dd",
onClose : function(dateText, inst) {
let endDateTextBox = $('#dateEnd');
if (endDateTextBox.val() != '') {
let testStartDate = new Date(dateText);
let testEndDate = new Date(endDateTextBox.val());
if (testStartDate > testEndDate)
endDateTextBox.val(dateText);
} else {
endDateTextBox.val(dateText);
}
},
onSelect : function(selectedDateTime) {
let start = $(this).datepicker('getDate');
$('#dateEnd').datepicker('option', 'minDate', new Date(start.getTime()));
table_consts.draw();
}
}).datepicker("setDate", new Date().toISOString().slice(0, 10));
$('#dateEnd').datepicker({
changeMonth : true,
changeYear : true,
selectOtherMonths : true,
showButtonPanel : true,
yearRange : "c-0:c+0",
dateFormat : "yy-mm-dd",
onClose : function(dateText, inst) {
let startDateTextBox = $('#dateStart');
if (startDateTextBox.val() != '') {
let testStartDate = new Date(startDateTextBox.val());
let testEndDate = new Date(dateText);
if (testStartDate > testEndDate)
startDateTextBox.val(dateText);
} else {
startDateTextBox.val(dateText);
}
},
onSelect : function(selectedDateTime) {
let end = $(this).datepicker('getDate');
$('#dateStart').datepicker('option', 'maxDate', new Date(end.getTime()));
table_consts.draw();
}
}).datepicker("setDate", new Date().toISOString().slice(0, 10));
$(document).ready(function() {
//html목록을 dataTable적용
table_consts = $('#manager-notice-table').DataTable({
lengthChange: true, // 표시 건수기능 숨기기
searching: true, // 검색 기능 숨기기
ordering: true, // 정렬 기능 숨기기
info: true, // 정보 표시 숨기기
paging : true, // 페이징 기능 숨기기
pageLength: 50, //기본 데이터건수
buttons : [ 'excel', 'pdf', 'print' ],
language : eval(datatable_lang)
});
});
let minDateCheck = function(d){
let min_date = d;
let current_date = min_date.getDate();
min_date.setDate(current_date -7);
return min_date.toISOString().slice(0, 10);
}
</script>
$('#dateStart').datepicker({})
날짜 사용을 위해 input type="date" id="dateStart"로 된 곳에 datepicker 라이브러리를 설정한다.
onSelect : function(selectedDateTime) { table_consts.draw(); }
datepicker 에서 제공하는 함수로 날짜 선택 이벤트 발생 함수이다. onchange 같은 느낌이다.
table_consts.draw(); 를 통해 날짜 range search 내용을 확인하고 다시 그린다.
아래는 HTML 내용이다.
....
<li class="">
<input type="date" th:id="dateStart" th:name="dateStart" class="date-start" readonly="readonly" />
<label class="icon wpicon deoIcon-calendar" for="dateStart"></label>
</li>
<li class="unit"> ~ </li>
<li class="">
<input type="date" th:id="dateEnd" th:name="dateEnd" class="date-end" readonly="readonly" />
<label class="icon wpicon deoIcon-calendar" for="dateEnd"></label>
</li>
....
별 내용은 없으며 위처럼 id 값이 설정된걸 볼 수 있다.