[자바스크립트] Flatpickr 사용해서 달력 만들기 (사용법, 예제, 옵션, 한국어)

아래 소스 코드는 Flatpickr 라이브러리를 사용하여 날짜, 시간 선택 등 다양한 옵션과 선택한 날짜를 처리하는 이벤트 까지 설명 드리겠습니다. Flatpickr 라이브러리는 다양한 날짜 및 시간 형식을 지원하고 사용자가 원하는 형식으로 입력을 할 수 있습니다. 또 다양한 언어로 날짜와 시간을 표시하고 옵션으로 이벤트 처리와 기능을 쉽게 추가할 수 있습니다.

 

소스코드

ㅇ flatpickr 함수를 사용하여 각각의 날짜 입력란에 Flatpickr 위젯을 연결하고 다양한 설정 옵션을 적용합니다.

ㅇ handleDateChange 함수는 날짜가 선택될 때 실행되는 콜백 함수로, 선택된 날짜를 콘솔에 출력합니다.

 

 

Flatpickr 옵션
ㅇ dateFormat : 날짜 표시 형식을 설정합니다. 예를 들어, 'Y-m-d H:i'는 '2023-09-12 15:30'과 같은 형식으로 표시합니다.
ㅇ enableTime : 시간 선택을 활성화하거나 비활성화합니다.
ㅇ time_24hr : 24시간 형식을 사용하도록 설정합니다.
ㅇ minDate : 선택 가능한 최소 날짜를 설정합니다. 여기서 'today'는 오늘 이전 날짜 선택을 비활성화합니다.
ㅇ defaultDate : 초기 날짜를 설정합니다. 'today'는 현재 날짜로 설정합니다.
ㅇ disable : 특정 날짜를 비활성화합니다.
ㅇ locale : 지역화 설정으로 한국어를 사용하도록 설정합니다.
ㅇ onChange : 날짜가 변경될 때 실행되는 콜백 함수를 등록합니다. handleDateChange 함수가 여기서 사용됩니다.
ㅇ disableMobile : 모바일 기기에서 위젯을 비활성화합니다.
ㅇ altInput 및 altFormat : 추가 입력란을 활성화하고 해당 형식을 설정합니다.

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ko.js"></script>
<div>
	<input type="text" id="datepicker" placeholder="날짜 및 시간 선택">
</div>
<div style="margin-top:50px;">
	<input type="text" id="datepicker2" placeholder="날짜 선택 (YYYY-MM-DD)">
</div>
<div style="margin-top:50px;">
	시작일 : <input type="text" id="startDate" placeholder="시작 날짜">
	종료일 : <input type="text" id="endDate" placeholder="종료 날짜">
</div>
<script>
	const datepicker = document.getElementById('datepicker');
	const datepicker2 = document.getElementById('datepicker2');
	const startDateInput = document.getElementById('startDate');
	const endDateInput = document.getElementById('endDate');
	
	function handleDateChange(selectedDates, dateStr, instance) {
		console.log('선택된 날짜:', dateStr);
	}

	flatpickr(datepicker, {
		dateFormat: 'Y-m-d H:i', // 날짜 및 시간 형식 설정 (예: 2023-09-12 15:30)
		enableTime: true,        // 시간 선택 활성화
		time_24hr: true,         // 24시간 형식 사용
		minDate: 'today',        // 오늘 이전 날짜 선택 비활성화
		maxDate: '2023-12-31',   // 특정 날짜까지 선택 가능
		defaultDate: 'today',    // 초기 날짜 설정 (현재 날짜와 시간)
		disable: ['2023-09-15', '2023-09-20'], // 특정 날짜 비활성화
		locale: 'ko',            // 한국어로 지역화
		onOpen: function(selectedDates, dateStr, instance) {
			// 위젯이 열릴 때 실행할 코드
		},
		onClose: function(selectedDates, dateStr, instance) {
			// 위젯이 닫힐 때 실행할 코드
		},
		onChange: function(selectedDates, dateStr, instance) {
			// 날짜가 변경될 때 실행할 코드
		},
		disableMobile: true,      // 모바일 기기에서 위젯 비활성화
		altInput: true,           // 추가 입력란 활성화
		altFormat: 'F j, Y H:i', // 추가 입력란의 날짜 및 시간 형식
	});

	flatpickr(datepicker2, {
		dateFormat: 'Y-m-d', // 날짜 형식 설정 (예: 2023-09-12)
		enableTime: false,   // 시간 선택 비활성화
		minDate: 'today',    // 오늘 이전 날짜 선택 비활성화
		defaultDate: new Date() // 초기 날짜 설정 (현재 날짜로 설정)

	});
	flatpickr(startDateInput, {
		dateFormat: 'Y-m-d',
		enableTime: false,
		minDate: 'today',
		defaultDate: 'today',
		locale: 'ko',
		onChange: handleDateChange, // 날짜 선택 이벤트 핸들러 등록
	});

	flatpickr(endDateInput, {
		dateFormat: 'Y-m-d',
		enableTime: false,
		minDate: 'today',
		defaultDate: 'today',
		locale: 'ko',
		onChange: handleDateChange, // 날짜 선택 이벤트 핸들러 등록
	});
</script>

 

소스코드 화면

 

datepicker 선택

 

datepicker2 선택

 

startDateInput 선택

 

이벤트 핸들러 콘솔 화면