[Datepicker] 옵션정리

공식홈페이지 : https://jqueryui.com/datepicker/

 

옵션		설명
showOn	focus (기본)	focus 될때 달력이 열립니다.
	button	버튼 클릭시에만 달력이 열리게 됩니다.
	both	focus, 버튼 두개다 사용하는 옵션입니다.
	사용예제 $('.date_inp').datepicker({ showOn: 'both', });
buttonImage		버튼 이미지를 선택합니다.
buttonImageOnly	false (기본)	버튼 기본 style 제거 입니다.
	true	버튼 기본 style 제거 입니다.
buttonText	'들어갈 문자를 입력해주세요.'	showOn: button, both 옵션과 함께 사용해야합니다. 버튼에 이미지 대신 나올 텍스트 입력란 입니다.
	사용예제 $('.date_inp').datepicker({ showOn: 'both', buttonText: '텍스트입력해주세요', });
changeYear	false (기본)	년, 월을 select 박스를 표시합니다.
changeMonth	true
yearRange	c-10:c+10 yearRange:"-10:+10" // 2012~2032 yearRange:"2012:2032" // 2012~2032 둘다 사용 가능합니다.	연도를 선택할수 있는 select 박스가 생성됩니다.
dateFormat	"yy-mm-dd" //2022-07-06 "yy,mm,dd" //2022,07,06	날짜 형식 옵션입니다.
dayNames	["월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"]	요일 툴팁입니다.
dayNamesMin	["월", "화", "수", "목", "금", "토", "일"]	표시되는 요일입니다.
monthNamesShort	["1월", "2월", "3월", "4월", "5월", "6월","7월", "8월", "9월", "10월", "11월", "12월"]	표시되는 월입니다.
showOtherMonths	false(기본)	이전달, 다음달의 날짜 표시여부 입니다.
	true
selectOtherMonths	false(기본)	월 1일 이전, 월 말일 이후 빈칸에 이전달, 다음달 날짜를 출력할수 있는 옵션입니다. showOtherMonths: ture 옵셥이 활성화 되어야 사용 가능합니다.
	true
nextText	"툴팁에 표시될 내용을 입력해주세요"	화살표의 툴팁 내용이 들어갈 공간입니다.
prevText
beforeShow	beforeShow: function (Element input, Object inst) { },	datepicker 실행되기 전에 일을 컨트롤할수 있습니다.
	사용예제 $('.date_inp').datepicker({ beforeShow: function (Element input, Object inst) { //소스를 입력해주세요 }, });
beforeShowDay	beforeShowDay: function (Date date) {},	날짜를 보여주기 전에 호출되는 이벤트입니다. 날짜표시에 대한 컨트롤이 가능합니다.
	사용예제 $('.date_inp').datepicker({ beforeShowDay: function (Date date) { //소스를 입력해주세요 }, });
firstDay	0 일 - 0          월 - 1          화 - 2 수 - 3          목 - 4          금 - 5          토 - 6	시작 요일 순서를 바꾸는 옵션입니다. 기본으로 일,월,화,수,목,토로 설정되어있습니다.
minDate	-10 "+3D"	최소 날짜를 설정할수 있는 옵션입니다.
maxDate		최대 날짜를 설정할수 있는 옵션입니다. +,- 로 단위설정이 가능합니다 절대날짜로 Y(년), M(월), D(일)을 뒤에 붙여서 사용 가능합니다.
numberOfMonths	[ 2, 3 ] //[행,열]	여러개의 달력을 표시할때 사용하는 옵셥입니다.
showWeek	false(기본)	true 일 경우 열이 추가되어 해당 연도의 주를 표시합니다.
	true
stepMonths	3	달력에서 이전달, 다음달 선택시 이동할 개월수 입니다. 3 일경우 이전, 다음달로 3달로 이동됩니다.
onSelect	onSelect:function (String date, Text Object inst){}	날짜가 선택될때 실행됩니다.
	사용예제 $('.date_inp').datepicker({ onSelect:function (){ //코드를 입력해주세요 } });

 

일하면서 자주 사용하는 옵션들을 정리해봤습니다 :)

제가 정리한 옵션외에도 다른 옵션들이 있으니 공홈에서 확인해보세요 😉