flatpickr 사용해보기

Peter·2024년 7월 18일

flatpickr

UI Reference

목록 보기

1/1

Browser Default Date Picker 살펴보기

브라우져가 기본적으로 제공해주는 Date Picker UI 가 있다.

input 태그의 type 을 "date" 로 설정하면 적용된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Browser Default</title>
  </head>
  <style>
    label {
      display: flex;
      align-items: center;
    }

    span::after {
      padding-left: 5px;
    }

    input:invalid + span::after {
      content: '✖';
      color: red;
    }

    input:valid + span::after {
      content: '✓';
      color: green;
    }
  </style>
  <body>
    <form action="">
      <label>
        Choose your preferred party date (required, April 1st to 20th):
        <input
          id="date"
          type="date"
          name="party"
          min="2017-04-01"
          max="2017-04-20"
          required
        />
        <span class="validity"></span>
      </label>
      <button type="button" onclick="onSave()">저장</button>
    </form>

    <script>
      function onSave() {
        let date = document.getElementById('date').value;
        console.log(date);
        alert('선택된 날짜: ' + date);
      }
    </script>
  </body>
</html>

위 코드를 실행하고 input 필드를 누르면 아래와 같이 캘린더 기반 Date Picker 를 볼 수 있다.

개인적으로는 UI 가 생각보다 엄청 나쁘지는 않은 것 같다.

input 태그에 min, max 속성으로 선택 가능한 날짜 범위도 지정해줄 수 있다.

하지만, 더 예쁜 디자인이 입혀진 오픈소스들이 많기 때문에 구지 기본 제공 Date Picker 를 쓸 필요는 없다.

flatpickr 적용해보기

chat gpt 에게 추천받은 flatpickr 를 한번 사용해봤다.

기본 설정

사용법은 간단하다. 아래와 같이, css 와 js 를 추가해주고 flatpickr() 메서드를 호출해주면 초기화된다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

// 상세 코드 생략

<script>
	flatpickr("#myID", {}); // 첫번째 파라미터는 dom id, 두번째 파라미터는 flatpickr 옵션
	// flatpickr("#myID"); // 아무런 옵션이 없다면, 생략해도 된다.
</script>

기본 설정만으로도 훨씬 깔끔한 UI 를 만나게 된다.

locale 적용

다양한 locale 를 지원한다. 적용방법도 엄청 간단하다.

적용할 locale 에 대한 script 를 추가하고, 아래와 같이 localize 메서드를 실행하면 된다.

한글을 적용해보았다.

<script src="https://npmcdn.com/flatpickr/dist/l10n/ko.js"></script>

<script>
	flatpickr.localize(flatpickr.l10ns.ko); // global 적용
</script>

특정 flatpickr instance 에만 locale 을 적용하고 싶으면 아래와 같이 하면 된다.

<script>	
	flatpickr(myElement, {
    "locale": "ko"  // locale for this instance only
	});
</script>

테마 적용

종류가 많지는 않지만, 그래도 여러 테마들을 제공한다.

아래와 같이 css 파일 하나 추가해주면, 테마가 바뀐다.

<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css"/>

날짜 선택 범위 지정

flatpickr 메서드의 옵션을 설정하여 날짜 선택 범위를 지정할 수 있다.

minDate, maxDate 옵션 필드로 최소, 최대 선택 가능한 날짜를 지정할 수 있다.

enable 옵션 필드에 function 을 넘겨줘서 특정 조건에 만족하는 날짜만 선택 가능하도록 지정할 수도 있다.

<script>
   flatpickr('#dateRange', {
	    minDate: '2024-01-15',
	    maxDate: '2024-01-21',
	  });
	  
    flatpickr('#dateOnHolyday', {
      enable: [
        function (date) {
          return date.getDay() === 0; // Sunday 만 허용
        },
      ],
    });
</script>

이외에도 flatpickr 는 다양한 옵션들을 제공하는데, 설명도 잘 나와 있어서 필요한 것은 금방 찾아볼 수 있다.

Reference

flatpickr 공식 홈: https://flatpickr.js.org/
직접 작성한 예시 코드: https://peter0618.github.io/ui-references/datepicker/flatpickr.html

Peter