Flatpickr [2] : 옵션 정리 - 날짜&시간 선택 JS 라이브러리

• Flatpickr.js 소개
• 옵션 작성 위치
• 옵션 정리
• 옵션 템플릿
• 데모 화면

목표
Flatpickr는 다양한 옵션을 손쉽게 설정할 수 있다. 공식홈페이지에 있는 Example 옵션에 대해 공부하고 정리해보자.

참고 문서
더 많은 옵션은 "Config Options "를 참고

---

# Flatpickr.js 소개

flatpickr

---

• 날짜 및 시간 선택 JS 기반 라이브러리
• <input type="date"> 와는 반대로 CSS 커스텀이 가능하고 다양한 기능을 제공한다

---

# 옵션 작성 위치

[JS] FlatPickr 초기화 할 때 옵션을 설정한다

flatpickr("#아이디명", {
  /* 옵션 : 옵션값, */
});

---

# 옵션 정리

enableTime (시간 활성화)

• [boolean] : true, false (기본)

time_24hr (24시간제 표시)

• [boolean] : true, false (기본)
• PM/AM 선택 영역이 사라지고 00 ~ 24 시간으로 표시

noCalendar (달력 UI 미표시)

• [boolean] : true, false (기본)
• true : 달력 UI 미표시, false : 달력 UI 표시
• 시간만 선택하는 옵션 : { enableTime: true, noCalendar: true }

dateFormat (날짜 형식)

• [string] : "Y-m-d" (기본), "Y-m-d H:i" (시간 활성화 기본)
• 내부 저장용 데이터
• 날짜 형식 (https://flatpickr.js.org/formatting)

종류	Full	Short
년	Y (2025)	y (25)
월 (string)	F (April)	M (Arp)
월 (num)	m (04)	n (4)
일	d (09, 두자리)	j(9)
요일 (string)	I (Wednesday)	D (Wed)
12 시간 (0~12)	h (02, 두자리)	g (2)
24 시간 (0~24)	H (14, 두자리)	G (14)
오전(AM) / 오후(PM)	K (PM)
분	i (30, 두자리)
초	s (0)

• 예) 2025년 04월 09일 수요일 14시 30분
  • "Y-m-d H:i" = "2025-04-09 14:30"
  • "F. m. Y" = "April. 04. 2025"

altInput, altFormat (입력 필드 형식)

• 입력 필드에 표시되는 날짜 형식
• altInput 옵션 : [boolean] true, false (기본)
• altFormat 옵션 : [string] "Fj, Y" (기본), ```{ altInput : true }``` 로 설정되어 있어야 함

defaultDate (초기값)

• [null] (기본)
• [string] : dateFormat 형식에 맞춘 날짜
  • "today" : flatpickr 에서 제공하는 오늘 날짜
• [ "" ] : 빈 문자열
  • input type="text" placeholder="날짜 입력"> 이렇게 placeholder를 이용할 수 있다
• [new Date()] : JS 날짜 객체
  • new Date() : 오늘
  • new Date(YYYY, M, D) : 4자리 숫자 년도 YYYY, 0부터 시작하는 월(0~11), 1부터 시작하는 일 (1~31)
  • new Date(2025, 0, 5) = 2025년 1월 5일
• enableTime (시간)을 설정하여 시간 초기값 설정 가능

minDate, maxDate (최소&최대 날짜 지정)

• [null] (기본)
• defaultDate 옵션값과 같음 (dateFormat 형식 문자열, "today", Date 객체)
• [함수] "new Date( ).fp_incr(n)"
  • 오늘 날짜 기준으로 n일 전/후의 날짜
  • flatpickr의 내장함수
  • new Date()에만 사용 가능 (new Date(2025,1,1)에 사용하면 에러 발생)
• enableTime (시간)을 설정하여 시간도 최소&최대 설정 가능

disable (비활성화)

• [배열] : 특정 날짜 ["날짜"], 범위 날짜 [ {form : "날짜", to : "날짜"}, {form : "날짜", to : "날짜"} ], 함수 이용 [ function(){ ~ } ]

flatpickr("#아이디명", {
  /* 특정 날짜 비활성화 */
  disable: ["2025-01-30", "2025-02-21", new Date(2025, 4, 9) ],
  /* 범위 날짜 비활성화*/
  disable: [
    { from: "2025-04-01", to: "2025-05-30"},
    { from: "2025-09-01", to: "2025-12-31"}
  ],
  /* 함수 이용 비활성화*/
  disable: [ // 일, 월요일 비활성화
    function(date) {return (date.getDay() === 0 || date.getDay() === 6);}
  ],
});

 

enable (날짜 활성화)

• [배열] : 옵션값은 disable와 같음
• disable의 반대로 날짜를 활성화

mode (날짜 모드)

• [string] "single" (기본), "multiple", "range"
• "multiple" :  여러 날짜 다중 선택 [날짜, 날짜]
  • 초기값 설정 : defaultDate: ["2025-01-15", "2025-01-20"]
    → 2025-01-15, 2025-01-20 초기값
• "range" : 날짜 범위 선택 "2025-01-01 to 2025-01-31"
  • 중간에 disable로 설정된 날짜가 있다면 해당 날짜는 선택할 수 없다
  • 초기값 설정 : defaultDate: ["2025-01-15", "2025-01-20"]
    → 2025-01-15에서 2025-01-20 까지 날짜 범위가 설정된 초기값

conjunction (다중 선택 구분자)

• {mode : "multiple"} 일때 사용 가능
• [string] : 구분자 문자열
  • { mode: "multiple", conjunction: " and " }  → "2025-01-14 and 2025-02-14" 반환

inline (달력 UI 열림 여부)

• [boolean] : true, false (기본)
• true 설정시 달력 UI가 열린 상태가 된다

weekNumbers (주 index)

• [boolean] : true, false (기본)
• true 설정시 좌측에 1월 1일부터 주 index가 표시된다

wrap (외부 요소사용 여부)

• [boolean] : true, false (기본)
• true 설정시 여러 요소로 이벤트 제어가 가능하다
• HTML 요소의 속성으로 설정한다
  • data-input : 날짜를 입력 받을 필드 요소
  • data-toggle : 달력 UI를 열고 닫고 할 수 있는 토글 버튼
  • data-open : 달력 UI를 열 수 있는 버튼
  • data-close : 달력 UI를 닫을 수 있는 버튼

<!-- HTML -->
<div class="flatpickr">
  <input type="text" data-input>
  <a data-toggle> 토글 </a>
  <a data-clear> 삭제 </a>
  <a data-open> 오픈 </a>
  <a data-close> 닫기 </a>
</div>

<!-- JS -->
<script>
  flatpickr(".flatpickr", {wrap: true});
</script>

---

# 옵션 템플릿

flatpickr("#아이디명", {
  enableTime : false,         // 시간 활성화
  time_24hr : false,          // 24시간 표시
  noCalendar : false,         // 달력 UI 미표시
  dateFormat : "Y-m-d H:i",   // 데이터 포맷 (날짜 형식)
  altInput : false,           // 입력 필드 형식 표현
  altFormat : "Fj, Y",        // 입력 필드 날짜 형식, {altInput : true}로 되어 있어야 한다
  defaultDate : null,         // 초기값
  minDate : null,             // 시작 날짜
  maxDate : null,             // 종료 날짜
  disable : [],               // 비활성화
  enable : undefined,         // 활성화
  mode : "single",            // 모드 "multiple", "range"
  conjunction : null,         // 다중 선택("multiple") 모드 구분자
  inline : false,             // 달력 UI 열림 여부
  weekNumbers : false,        // 주 index 활성화
  wrap : false,               // 외부 요소 사용 여부 (data-input, data-toggle, data-open, data-close)
  locale : null,              // 현지화 (추가 옵션)
});

---

# 데모 화면

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FlatPickr 옵션</title>
  <link rel="stylesheet" href="./src/flatpickr.min.css">
  <!-- 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>
  <!-- FONT AWESOME 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;}
    li{list-style-type: none;}
    /* layout.css */
    .wrap{max-width: 1200px; margin: 24px auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 240px)); gap: 12px; justify-content: center;}
    .wrap > section{height: min-content; display: flex; flex-direction: column; gap: 8px; border: 1px solid #d8d8d8; border-radius: 4px;}
    .wrap > section > label {margin: 8px 8px 0 8px; }
    .wrap > section > input {margin: 0px 8px 4px 8px; padding: 4px 8px; box-sizing: border-box; border : 1px #dbdbdb solid; border-radius: 4px;}
    .wrap > section > p {font-size: .8em; background-color: #eee; padding: 4px 8px;}
    /* FlatPickr CSS */
    #date12{padding: 0px 8px;}
    #date12 > p{margin: 8px 0;}
    #date12 > button {border : 1px solid #c4c4c4 ; background-color: #fff; width: 24px; height: 24px; cursor: pointer;}
    #date12 > button:hover i{color: cadetblue;}
    #date12 > button i {font-size: 16px;}
    #date12 > input {margin-top: 8px; padding: 4px 8px; box-sizing: border-box; border : 1px #dbdbdb solid; border-radius: 4px;}
  </style>
</head>
<body>
<div class="wrap">
  <section>
    <label for="date1">기본</label> 
    <input type="text" id="date1" placeholder="날짜 입력"> 
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <label for="date2">날짜+시간<br/>표시&저장 데이터 형식</label> 
    <input type="text" id="date2" placeholder="날짜 입력"> 
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <label for="date3">시간</label> 
    <input type="text" id="date3" placeholder="날짜 입력"> 
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <label for="date4">24 시간<br/>최소&최대 시간</label> 
    <input type="text" id="date4" placeholder="날짜 입력"> 
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <label for="date5">초기값<br/>최소&최대 날짜</label> 
    <input type="text" id="date5"> 
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <label for="date6">비활성화(함수, 배열)</label> 
    <input type="text" id="date6" placeholder="날짜 입력"> 
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <label for="date7">비활성화(범위)</label> 
    <input type="text" id="date7"> 
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <label for="date8"> 다중 선택 (초기값)</label> 
    <input type="text" id="date8"> 
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <label for="date9"> 범위 선택(초기값)</label> 
    <input type="text" id="date9"> 
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <label for="date10"> 주 index 표시</label> 
    <input type="text" id="date10"> 
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <div id="date12">
      <p>외부 요소 활용</p>
      <button title="토글" data-toggle><i class="fa-solid fa-calendar" ></i></button>
      <button title="삭제" data-clear><i class="fa-solid fa-trash"></i></button>
      <button title="열기" data-open><i class="fa-solid fa-door-open" ></i></button>
      <button title="닫기" data-close><i class="fa-solid fa-door-closed" ></i></button>    
      <input type="text" data-input> 
    </div>
    <p>Data : <span class="print"></span></p>
  </section>
  <section>
    <label> 달력 UI 표시</label> 
    <input type="text" id="date13"> 
    <p>Data : <span class="print"></span></p>
  </section>
</div>
<script>
flatpickr("#date1", {
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date2", {
  enableTime : true,
  dateFormat : "Y.m.d K h:i",
  altInput :true,
  altFormat : "Y년 n월 j일 G:i (D)",
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date3", {
  enableTime : true,
  noCalendar : true,
  dateFormat : "K h:i",
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date4", {
  enableTime : true,
  noCalendar : true,
  time_24hr : true,
  minDate : "09:30",
  maxDate : "18:30",
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date5", {
  defaultDate : "today",
  minDate : new Date().fp_incr(-3),
  maxDate : new Date().fp_incr(3),
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date6", {
  minDate : "today",
  disable: [ // 일, 월요일 비활성화
    function(date) {return (date.getDay() === 0 || date.getDay() === 6);}, 
    "today"
  ],
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date7", {
  defaultDate : "2025-01-01",
  disable: [ // 일, 월요일 비활성화
    {from : "2025-01-08", to : "2025-01-14" },
    {from : "2025-01-22", to : "2025-01-28" },
  ],
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date8", {
  defaultDate : ["2025-01-01", "2025-01-07"],
  mode : "multiple",
  conjunction  : " & ",
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date9", {
  defaultDate : ["2025-01-01", "2025-01-07"],
  mode : "range",
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date10", {
  weekNumbers : true,
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date12", {
  wrap : true,
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
flatpickr("#date13", {
  inline : true,
  onChange: function(selectedDates, dateStr, instance) {
    instance.element.closest('section').querySelector(".print").innerText = dateStr;
  }
});
</script>
</body>
</html>