반응형
날짜 선택 시 유용하게 사용 가능한 Jquery플러그인 Datepicker
https://jqueryui.com/datepicker/
Datepicker 기본코드
DatePicker 기본 코드는 아래와 같다.
jquery코드 로드해주고, datepicker css파일, js파일을 넣어주면 된다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="datepicker">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Datepicker 옵션
Datepicker에는 다양한 옵션들이 있어서 필요한 경우 적용해서 사용하면 된다.
option | value | 설명 |
minDate | -1Y : 일년전 -1M : 한달전 -1D : 하루전 0 : 오늘부터 |
최소로 가능한 선택 일자를 지정 |
max Date | 0 : 오늘까지 +1D : 하루후 +1M : 한달후 +1Y : 일년후 |
최대로 가능한 선택 일자를 지정 |
changeYear | true, false | 연도 변경 가능한 셀렉트박스 표시 |
changeMonth | true, false | 월 변경 가능한 셀렉트 박스 표시 여부 |
dateFormat | yy-mm-dd | 데이터 표시 형식 지정 |
showButtonPanel | true, false | 오늘, 닫기 버튼 활성화 여부 |
yearRange | 2010:2020 또는 c-10:c+10 |
연도 범위를 지정 * 2010:2020 => 2010년부터 2020년 까지 보여줌 * c-10:c+10 => 현재 연도로부터 10년전부터 10년후까지 보여줌 |
showWeek | true, false | 주차 표시 여부 |
showButtonPanel | true | 캘린더 하단에 버튼 패널을 표시한다. |
stepMonths | 3 | next, prev 버튼을 클릭했을때 얼마나 많은 월을 이동하여 표시하는가. |
buttonImageOnly | true | 버튼에 있는 이미지만 표시한다. |
buttonImage | 이미지경로 | 버튼이이미지 |
showOn | both | 버튼과 텍스트 필드 모두 캘린더를 보여준다. |
showAnim | show(기본), slide, fade in, blind, bounce, clip, drop fold, none |
달력 창 나올 때 애니메이션을 적용 |
showMonthAfterYear | true, false | 월, 년순의 셀렉트 박스를 년,월 순으로 바꿔준다. |
numberOfMonths | [1,1] | 한번에 얼마나 많은 월을 표시할것인가. 예) [2,3] 일 경우, 2(행) x 3(열) = 6개의 월을 표시한다. |
한글 표기 변경 옵션
option | value | 설명 |
dayNamesMin | ['월', '화', '수', '목', '금', '토', '일'] | 요일 한글로 변경 |
monthNamesShort | ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] | 월 한글 변경 |
closeText | 닫기 | 닫기 버튼 텍스트 변경 |
currentText | 오늘 | 오늘 날짜로 이동하는 버튼 텍스트 변경 |
nextText | 다음 달 | next 버튼 텍스트 |
prevText | 이전 달 | prev 버튼 텍스트 변경 |
한글로 변경하는 것은 https://hongpage.kr/13 에 더 자세히 포스팅하였다.
옵션 적용 예시
$("#datepicker").datepicker({
minDate: "0",
maxDate: "+1Y",
});
예시처럼 적용하면 오늘부터 1년 후의 범위 내에 있는 날짜만 선택이 가능하다.
반응형
'개발 > js·jquery' 카테고리의 다른 글
자바스크립트 예약어 (2) | 2024.02.27 |
---|---|
[jQuery] 새로고침 시 스크롤 위치 맨위로 리셋해주는 스크립트 (4) | 2023.11.19 |
[jQuery] 스크롤 이벤트 / 스크롤 특정 위치에 따라 효과 변경 (4) | 2023.11.19 |
[jQuery] Swiper 슬라이더 버튼 컬러 변경 (Navigation, Pagination) (4) | 2023.11.06 |
[jQUery/JS] 음악 비디오 재생/일시정지/음소거 버튼 만들기 (2) | 2023.08.21 |
[jQuery] 결과값 숫자로 보여주기 (숫자에 콤마 찍기) (2) | 2023.06.05 |
jQuery 오류 - The page at '<URL>' was loaded over HTTPS, but requested an insecure script '<URL>' (2) | 2023.05.04 |
[jQuery] Uncaught TypeError: $(...).sortable is not a function 오류 해결 (2) | 2023.04.27 |