-
초보자도 만들 수 있는 달력으로 일정 및 시간 예약 확정 알림 만들기Study/JavaScript 2025. 3. 26. 18:04반응형
오늘은 초보자들이 많이 만드는 기능중에 하나인 예약기능에서
html에서 제공하는 달력 기능을 이용하여 날짜와 시간을 받아 알림창에 띄우는 기능을 만드는 방법에 대해서
알려 드릴려고 함.
일단 무엇을 만들수 있는지 결과부터 알려드림.
1.결과
2.설명
<input type="date"> <input type="time"> <input type="datetime-local">이 요소들은 HTML5에 추가된 input 요소로, 사용자가 데이터 형식을 쉽게 입력할 수 있도록 도와주며, 브라우저에 따라 다른 모습의 UI를 제공함. 참고로 오늘 사용하고자 하는 브라우져는 크롬 임.
각각의 input의 차이점으로는
<input type="date">: 날짜만 입력받음.
<input type="time">: 시간만 입력받음.
<input type="datetime-local">: 날짜와 시간을 모두 입력받음.(1) html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>날짜 과 시간 예약하기</title> </head> <body> <ui> <li><input type="date" id="dateInput"> <button onclick="date()">날짜확정</button></li> <li><input type="time" id="timeInput"> <button onclick="time()">시간확정</button></li> <li><input type="datetime-local" id="datetimeInput"> <button onclick="datetime()">예약확정</button></li> </ui> </body> </html>html요소 중 제일 중요한 부분은 input 태그와 button 태그를 만들어서 onclick 이벤트는 거는게 중요함.
onclick 이벤트를 걸어야 버튼을 눌렀을때 이벤트를 실행 시키면서 alert을 띄울 수 있음.
(2) css
<style> ui { list-style-type: none; } li{ margin-bottom: 20px; } </style>css는 넣어도 좋고 빼도 상관없으나 UI적으로 보기 편하게 만들기 위해 추가적으로 css 넣음
(3)javaScript
<script> function date(){ const input = document.getElementById('dateInput'); const value = input.value; if(value==""){ return; } alert(value+" 날짜가 확정 되었습니다."); } function time(){ const input = document.getElementById('timeInput'); const value = input.value; if(value==""){ return; } alert(value+" 시간이 확정 되었습니다."); } function datetime(){ const input = document.getElementById('datetimeInput'); const value = input.value; if(value==""){ return; } alert(value+" 일정이 확정 되었습니다."); } </script>html코드에서 버튼을 눌렀을때 onclick 이벤트 함수를 처리하는 부분으로 매우중요!
각각의 input 에서 받아온 날짜 또는 시간 value를 추출하여 alert 창에 뽑아낸 데이터 값을 보여주는 함수 임.
추가적으로 설명을 하자면 if(value=="") 코드의 경우 달력이나 시간을 선택하지 않았을때
빈값으로 alert창이 뜨는 걸 방지하기 위해 작성한 코드 임.
(4)전체코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>날짜 과 시간 예약하기</title> </head> <style> ui { list-style-type: none; } li{ margin-bottom: 20px; } </style> <body> <ui> <li><input type="date" id="dateInput"> <button onclick="date()">날짜확정</button></li> <li><input type="time" id="timeInput"> <button onclick="time()">시간확정</button></li> <li><input type="datetime-local" id="datetimeInput"> <button onclick="datetime()">예약확정</button></li> </ui> </body> <script> function date(){ const input = document.getElementById('dateInput'); const value = input.value; if(value==""){ return; } alert(value+" 날짜가 확정 되었습니다."); } function time(){ const input = document.getElementById('timeInput'); const value = input.value; if(value==""){ return; } alert(value+" 시간이 확정 되었습니다."); } function datetime(){ const input = document.getElementById('datetimeInput'); const value = input.value; if(value==""){ return; } alert(value+" 일정이 확정 되었습니다."); } </script> </html>전체코드만 필요한 사람은 위에 코드 참고하심될듯.
위에 코드는 아주 기본적인 기능활용법이고 위에 기능을 활용하여 데이터 베이스에 저장도 가능하고,
api를 통해 다른 곳으로 데이터를 보낼수도 있을듯함.
이기능을 기초로 이것저것 함 만들어보시면 좋을듯함.
반응형'Study > JavaScript' 카테고리의 다른 글
초보자를 위한 웹 그림판 만들기(그리기,메모,블럭지정 또는 모양넣기) (2) 2025.03.20 초보자도 만들 수 있는 파일첨부 및 이미지 미리보기 기능 (0) 2025.01.09 초보자를 위한 가짜 목서버 or 임시api 사용법(포스트맨 최신 버젼)_2 (0) 2024.04.29 초보자를 위한 가짜 목서버 or 임시api 사용법(포스트맨 최신 버젼)_1 (0) 2024.04.25 초보자도 만들 수 있는 자바스크립트로 그림판 만들기(텍스트 추가하기 기능) (1) 2024.03.14