본문 바로가기
html · js · jquery · css

제이쿼리 datepicker 기본형 소스

by 빡스웹 2022. 5. 24.
반응형
<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" class="datepicker" readonly>

<script> 
$( function() { 
	$( ".datepicker" ).datepicker({ 
		changeMonth: true, // 월을 바꿀수 있는 셀렉트 박스를 표시한다. 
		changeYear: true, // 년을 바꿀 수 있는 셀렉트 박스를 표시한다. 
		yearRange: 'c-100:c+100', 
		showButtonPanel: true, // 캘린더 하단에 버튼 패널을 표시한다. 
		currentText: '오늘 날짜' , // 오늘 날짜로 이동하는 버튼 패널 
		closeText: '닫기',  // 닫기 버튼 패널 
		dateFormat: "yy.mm.dd", // 텍스트 필드에 입력되는 날짜 형식. 
		showAnim: "fade", //애니메이션을 적용한다. 
		showMonthAfterYear: true , // 월, 년순의 셀렉트 박스를 년,월 순으로 바꿔준다. 
		dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], // 요일 
		monthNames : ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], 
		monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
	}); 
}); 
</script>
반응형

댓글