반응형
아래 소스 코드는 Air Datepicker 라이브러리를 사용하여 달력 기능을 추가하고, 사용자가 날짜를 선택하면 해당 날짜를 표시하고 선택한 날짜의 요일을 표시하는 간단한 예제입니다.
소스코드
1. $('#datepicker').datepicker({ ... })
-#datepicker 요소에 air-datepicker를 적용하는 코드입니다.
-language: 달력의 언어 설정. 요일과 월 이름을 한국어로 설정하고, 오늘 및 지우기 버튼 텍스트를 지정합니다.
-minDate: 최소 선택 가능한 날짜를 현재 날짜로 설정합니다.
-dateFormat: 선택한 날짜의 형식을 "yyyy-mm-dd"로 설정합니다.
-onSelect: 사용자가 날짜를 선택했을 때 호출되는 콜백 함수를 정의합니다. 이 함수는 선택한 날짜를 표시하고 선택한 날짜의 요일을 확인하여 표시합니다.
2. onSelect 이벤트 핸들러
-onSelect 옵션은 사용자가 날짜를 선택했을 때 호출되는 콜백 함수를 정의합니다. 이 함수는 선택한 날짜의 포맷된 문자열(formattedDate), JavaScript Date 객체(date), 그리고 datepicker 인스턴스(picker)를 받습니다.
함수 내에서 선택한 날짜와 요일을 표시합니다. 요일은 date.getDay()를 사용하여 확인되고, 한국어 요일 이름 배열(days)을 통해 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.1.0/css/datepicker.min.css">
</head>
<body>
<input type="text" id="datepicker">
<p id="selected-date"></p>
<p id="day-of-week"></p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.1.0/js/datepicker.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// air-datepicker를 input 요소에 연결
$('#datepicker').datepicker({
language: {
daysMin: ['일', '월', '화', '수', '목', '금', '토'],
months: [
'1월', '2월', '3월', '4월', '5월', '6월',
'7월', '8월', '9월', '10월', '11월', '12월'
],
today: '오늘',
clear: '지우기',
dateFormat: 'yyyy-mm-dd',
firstDay: 0
},
minDate: new Date(), // 최소 선택 가능한 날짜를 현재 날짜로 설정
dateFormat: 'yyyy-mm-dd', // 날짜 형식 설정 (년-월-일)
onSelect: function (formattedDate, date, picker) {
if (date) {
$('#selected-date').text('선택한 날짜: ' + formattedDate);
var dayOfWeek = date.getDay();
var days = ['일', '월', '화', '수', '목', '금', '토'];
$('#day-of-week').text('요일: ' + days[dayOfWeek]);
} else {
$('#selected-date').text('');
$('#day-of-week').text('');
}
}
});
});
</script>
</body>
</html>
반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] jQuery.extend() 함수 사용법, 예제 (객체 합치기) (0) | 2023.11.03 |
|---|---|
| [jQuery] trigger() 메서드 사용법, 예제 (이벤트 강제발생) (0) | 2023.11.03 |
| [jQuery] append(), prepend() 메서드 사용법, 예제 (HTML 구조변경) (0) | 2023.10.27 |
| [jQuery] each() 메서드 사용법, 예제, 활용방법 (반복 작업) (1) | 2023.10.26 |
| [jQuery] select 선택 값 가져오고 변경하기, option 추가하고 확인하기 (0) | 2023.10.12 |
댓글