"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
1. HTML 구성
먼저 HTML 파일을 생성하고 DatePicker를 위한 두 개의 입력 필드를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DatePicker 예제</title>
</head>
<body>
<label for="start-date">시작일:</label>
<input type="date" id="start-date" name="start-date">
<label for="end-date">종료일:</label>
<input type="date" id="end-date" name="end-date">
</body>
</html>
2. JavaScript로 DatePicker 동작 추가
이제 JavaScript를 사용하여 DatePicker를 동작하게 만들어 보겠습니다. 아래의 코드는 시작일과 종료일 간의 유효성을 검사하고, 종료일이 시작일보다 이후인 경우 경고를 표시합니다.
document.addEventListener("DOMContentLoaded", function () {
const startDateInput = document.getElementById("start-date");
const endDateInput = document.getElementById("end-date");
startDateInput.addEventListener("input", function () {
const startDate = new Date(startDateInput.value);
const endDate = new Date(endDateInput.value);
if (startDate > endDate) {
alert("시작일은 종료일보다 이전이어야 합니다.");
startDateInput.value = "";
}
});
endDateInput.addEventListener("input", function () {
const startDate = new Date(startDateInput.value);
const endDate = new Date(endDateInput.value);
if (startDate > endDate) {
alert("시작일은 종료일보다 이전이어야 합니다.");
endDateInput.value = "";
}
});
});이제 시작일과 종료일을 선택하면 JavaScript가 날짜를 비교하고 필요한 경우 경고를 표시합니다.
jq를 이용한 예제
"DatePicker 시작일/종료일"은 사용자가 시작일과 종료일을 선택하고 데이터베이스에서 해당 날짜 범위의 정보를 필터링하거나 조회하는 데 사용됩니다.
DatePicker의 메소드 중 onClose를 이용하여 사용자가 날짜를 선택하면 반대 달력의 maxDate와 minDate를 지정하여 선택하지 못하도록 하는 방식이다. 위 코드를 이용하여 실제 구현한 예제 링크를 추가 한다.
DatePicker는 사용자 경험을 향상시키고 데이터 필터링 또는 분석을 더 효율적으로 수행하는 데 도움이 되는 중요한 웹 요소 중 하나입니다.
반응형
'Web Code > JS' 카테고리의 다른 글
| [JS] 스크롤 진행률 표시줄 / scroll indicator (0) | 2021.06.07 |
|---|---|
| [JS] Input 검색 필터 / 검색 창 만들기 (복제), input 검색 딜레이 / 검색 필터 딜레이 (0) | 2021.04.19 |
| [JS] Input 검색 필터 / 검색 창 만들기 (생성) (0) | 2021.04.15 |
| [JS] Table input checkbox All click / 테이블 전체 체크 (0) | 2021.02.22 |
| [JS] input type file 파일 미리보기 수정 삭제 기능 (0) | 2020.09.12 |
댓글