flatpickr 오픈소스 설정. 달력/시간 입력 라이브러리.

웹으로 날짜/시간 등을 입력받을 때, 텍스트로 일일이 입력받는게 아니라, 달력 컴포넌트를 이용하거나 시간 선택 컴포넌트를 이용해서 입력편의성을 높이게 된다. 처음에는 그냥 텍스트로 입력받도록 내비두었었는데, 오타도 있고 편의성이 떨어지다보니 구글링해서 오픈소스를 하나 선택해서 공부하게 되었다.

flatpickr

먼저 js / css 라이브러리 먼저 html 파일에 참조한다. 여기서 material_orange.css 파일을 참조한건 오렌지색 스타일의 스킨을 사용하려고 참조했다. 디폴트 디자인 말고도 여러개의 색상으로 변경할 수 있도록 css 를 제공하고 있다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_orange.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://npmcdn.com/flatpickr/dist/l10n/ko.js"></script>

 

html 에 input 태그 추가. bootstrap5 로 화면 디자인을 하고있고, 학원생의 생년월일을 입력받을 예정이다.

<div class="col-6">
    <label class="form-label" for="birth">학생 생년월일</label>
    <input class="form-control" id="birth" pattern="\d{4}-\d{2}-\d{2}" placeholder=""
           required th:field="*{birth}" type="text" value="">
    <div class="invalid-feedback">
        학생 생년월일을 입력해주세요.(예시 2021-01-01)
    </div>
</div>

 

드디어 flatpickr 를 설정한다. monthSelectorType 옵션은 달력에보면 월을 고르는 dropdown 기능이 디폴트인데, 이게 디자인을 좀 헤치는 것처럼 보여서 비활성화 하기위해 static 으로 조정했다.

var fp = flatpickr(document.getElementById("birth"), {
	'monthSelectorType' : 'static',
	"locale": "ko" 
});

 

혹시 flatpickr 에 별도로 값 바인딩을 하고 싶다면 setDate 로 설정할 수 있다. 

fp.setDate('2022-01-11');

의도한대로, 오렌지색 스타일의 달력호출이 완성되었다. 이정도 간단함으로 이정도의 완성도 있는 달력 오픈소스를 쓸 수 있어서 너무 만족스럽다. 모바일 환경에는 조금 다르게 디자인되어 표현되긴 하지만, 잘 작동하고 불편함 없이 쓰고 있다.