JQuery의 plugin을 사용해서 DateTimePicker를 만들어봅시다.
DateTimePicker는 날짜, 시간을 클릭 할 수 있습니다.
Clean jQuery Date and Time Picker Plugin - datetimepicker
datetimepicker is a jQuery plugin that popups a simple and clean date & time picker interface when an input field on focus.
www.jqueryscript.net
위 링크를 들어가 Download를 눌러줍니다.
다운로드된 파일의 압축을 풀어줍니다.
압축을 푼 파일을 들어가 bulid에 들어가줍니다.
jquery.datetimepicker.min.css와 jquery.datetimepicker.min.js 두개를 프로젝트에 넣어줄 것 입니다.
css,js 폴더를 만든 후 복붙해서 넣어줍니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jquery/Step04_plugin.jsp</title>
<!-- 플러그인에서 제공해주는 css 로딩 -->
<link rel="stylesheet" href="css/jquery.datetimepicker.min.css" />
<!-- jquery 로딩 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 플러그인 javascript 로딩 -->
<script src="js/jquery.datetimepicker.full.min.js"></script>
</head>
<body>
<input id="inputDate" type="text" placeholder="날짜 입력..."/>
<script>
$("#inputDate").datetimepicker();
</script>
</body>
</html>css, js, jquery를 로딩해주고 input박스를 만든 뒤 datetimepicker()을 사용하여 만들어줍니다.
잘 만들어진것을 확인 할 수 있습니다.
'WEB' 카테고리의 다른 글
| [JQuery] Ajax 구현하기 / 장단점 / 구조 / 예제 (0) | 2021.11.30 |
|---|---|
| [JQuery] Fotorama 사용해보기 / 이미지 슬라이드 만들기 (0) | 2021.11.30 |
| [JQuery] JQuery로 effect 넣기 - 숨기기/보이기/토글 효과 (0) | 2021.11.30 |
| [JQuery] JQuery를 사용해서 동적으로 요소 추가하기 (0) | 2021.11.30 |
| [JSP/Servlet] Filter 사용하기 / 인코딩 필터, 로그인 필터 (0) | 2021.11.29 |
