- Flatpickr.js 소개
- 사용 방법
- 데모 화면
# Flatpickr.js 소개
flatpickr
Introduction Introduction flatpickr is a lightweight and powerful datetime picker. Lean, UX-driven, and extensible, yet it doesn’t depend on any libraries. There’s minimal UI but many themes. Rich, exposed APIs and event system make it suitable for any
flatpickr.js.org
- 날짜 및 시간 선택 JS 기반 라이브러리
- <input type="date"> 와는 반대로 CSS 커스텀이 가능하다
- JS 로 제작되어 빠르고 가벼우며, 다양한 기능(테마, 시간 선택, 언어 등)을 제공한다
- 모든 브라우저에서 같은 UI와 기능을 제공한다
(<input type="date"> 는 Safari 9 이전은 미지원한다)
# 사용 방법
1. flatpickr.min.css, flatpickr.js 연결 (CDN)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
2. [HTML] flatpickr 적용할 요소에 아이디명(혹은 클래스명) 추가
<input type="text" id="아이디명">- div, input 등 다양한 요소에 적용해도 동작 하지만, <input type="text"> 에 적용하는 것을 추천한다
- 왜 <input type="date">에 적용하지 않는지?
- 브라우저의 기본 달력 UI를 제거하고 Flatpickr을 적용하기 위해서
- 기본 달력 UI가 보일수가 있고, 기본 달력 이벤트가 충돌할 수도 있기 때문이다
3. [JS] flatpickr 초기화(선언)
flatpickr("#아이디명", {
/* 옵션 : 옵션값, */
});# 데모 화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flatpickr</title>
<!-- FlatPickr CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- FontAwesome CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* reset.css */
*{margin: 0; padding: 0;}
/* layout.css */
body{display: flex; align-items: center; justify-content: center; height: 80vh;}
.wrap h2{font-size: 1em; font-weight: 400; margin-bottom: 12px;}
.flatpickr-container{position: relative;}
.flatpickr-container input{border:1px solid #d4d4d4; padding: 8px; border-radius: 6px;}
.flatpickr-container i{position: absolute; top:4px; right: 8px; z-index: 1; padding: 4px; cursor: pointer;}
.flatpickr-container:hover i{color: darkcyan;}
</style>
</head>
<body>
<div class="wrap">
<h2>FlatPickr 라이브러리</h2>
<div class="flatpickr-container">
<input type="text" id="flatpickr" placeholder="날짜를 입력하세요">
<i class="fa-solid fa-calendar"></i>
</div>
</div>
<script>
const pickr = flatpickr("#flatpickr",{ });
document.querySelector(".flatpickr-container i").addEventListener("click", () => {
pickr.open();
});
</script>
</body>
</html>'Web 개발 > Plugin&Library' 카테고리의 다른 글
| Flatpickr [3] : 추가 옵션 (현지화, 테마) - 날짜&시간 선택 JS 라이브러리 (0) | 2025.03.05 |
|---|---|
| Flatpickr [2] : 옵션 정리 - 날짜&시간 선택 JS 라이브러리 (0) | 2025.03.04 |
| Slick.js [이슈] : 반응형 좌우 배치 레이아웃 관련 (0) | 2025.02.26 |
| Slick.js [3] : HTML 구조 & CSS 적용 - 슬라이드 jQuery 라이브러리 (0) | 2025.02.21 |
| Slick.js [2] : 옵션 정리- 슬라이드 jQuery 라이브러리 (0) | 2025.02.20 |
