[jQuery] datepicker | timepicker

공부하면서 정리한 내용입니다
참고한 내용은 링크를 확인해주세요

---

🐟 Datepicker

다운로드 : jQuery UI framework

사용방법 : jQuery interface

<!--HTML-->

<input type="text" id="specialDate" placeholder="날짜 선택" autocomplete="off" readonly>

▲ 텍스트입력창이므로 readonly (읽기전용)처리하여 datepicker의 기능 외 제한

// jquery

$("#specialDate").datepicker();

option 및 set default

//jQuery

// 기본값 설정
$.datepicker.setDefaults(
	dateFormat: "yy-mm-dd",
    showMonthAfterYear: true,
    changeMonth: true,
    changeYear: true,
    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월'],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토']
}

$("#start").datepicker({ 
    minDate: 0,
    maxDate: null,
    onClose: function( 2022-11-11 ){ //
					// 시작일-종료일 선택영역 제한하기
				  $("#end").datepicker("option", "minDate", 2022-11-11 ); 
		}
});

🐟 Timepicker

timepicker 사용방법의 구성에서 옵션 사용 방법 및 코드를 제공한다.

다운로드 : https://timepicker.co/
사용방법 : https://timepicker.co/

<!--HTML-->

<input type="text" id="specialTime" placeholder="시간 선택" autocomplete="off" readonly>

// jQuery

$('#specialTime').timepicker({ option });

Option

//jQuery

$("#start, #end").timepicker(  // 동일한 옵션을 가진 피커 한번에 선언하기
{
    timeFormat: 'HH:mm',
    interval: 60,
    minTime: '10',
    maxTime: '23:00',
    defaultTime: 'now',
    startTime: '00:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true
    zindex: '9999999',
    change: function(time){  
				// 값 변경 후 작업
		}
});

---