메리

datepicker에 필요한 파일

// jquery.js, jquery-ui.css , jquery-ui.js
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

datepicker 기본 세팅(세팅 후 dom에 붙이는 경우)

//datepicker의 기본옵션을 설정
$.datepicker.setDefaults({
  //날짜 포맷, 실제 데이터 포맷은 yyyy/mm/dd
  dateFormat: "yy/mm/dd",
  
  //prev 아이콘 마우스오버 표시 텍스트
  prevText: "이전 달",
  
  //next 아이콘 마우스오버 표시 텍스트
  nextText: "다음 달",	
  
  //달력에 표시될 월 이름
  monthNames: ["1월", "2월", "3월", "4월", "5월", "6월","7월", "8월", "9월", "10월", "11월", "12월",],
  
  //요일 이름(html상 dom title이 되는 듯)
  dayNames: ["일", "월", "화", "수", "목", "금", "토"],
  
  //달력에 표시될 요일 이름
  dayNamesMin: ["일", "월", "화", "수", "목", "금", "토"],
  
  //달력에서 연-월 순으로 표시되게 함
  showMonthAfterYear: true,
  
  //달력에서 yyyy뒤에 붙일 단위
  yearSuffix: "년",
  
  //선택 가능한 최소 날짜
  minDate: "2021/07/12",
  
  //선택 가능한 최대 날짜
  maxDate: "2021/08/12",
  
  //월이 텍스트가 아니라 드랍박스(select)형태로 나옴
  changeMonth: true,
  
  //changeMonth를 사용하는 경우 표시될 월 이름 약자
  monthNamesShort: ["1월", "2월", "3월", "4월", "5월", "6월","7월", "8월", "9월", "10월", "11월", "12월",],
  
  //년도가 텍스트가 아니라 드랍박스(select)형태로 나옴
  changeYear: true,
  
  //달력 밑에 버튼 표출 여부. 오늘 날짜 설정하는 today 버튼과 완료(done)버튼이 표시가 됨.
  showButtonPanel : treu,
  
  //날짜가 선택되면 호출될 함수
  onSelect: function (dateText) {
    console.log(dateText)
  },
  
  //년이나 월 변경시에 호출될 함수
  onChangeMonthYear : function (year,month){
    console.log(year + '년 ' + month);
  },
  
  //달력이 표시되기 전에 호출될 함수
  beforeShow: function () {
    alert("날짜 선택");
  },
});

dom 객체에 datepicker 붙이기 

$("#startDt").datepicker();
$("#endDt").datepicker();

세팅과 동시에 dom에 붙이는 방법도 있다.

$("#endDt").datepicker({
    dateFormat: "yy/mm/dd",
    onSelect: function (dateText) {
    },
}).datepicker("setDate",new Date());

메소드 사용하기

// 메소드 기본 사용 형태
$( ".selector" ).datepicker( "메소드이름", 파라미터);

//달력에 표시할 기본 날짜를 지정하는 메소드
$( ".selector" ).datepicker( "setDate", new Date());
$( ".selector" ).datepicker( "setDate", "2021/08/11");

//옵션을 설정하는 메소드
 $("#endDt").datepicker("option", {
        minDate: "2021/07/11",
        beforeShow: function () {
		},
 });