【jQuery】datepicker를 사용하여 캘린더를 구현!

문의 양식을 작성할 때 캘린더에 맞춤설정이 필요하고 사용한 datepicker에 대한 개요를 제공합니다.

【목차】



1.datepicker로 할 수 있는 일
2.datepicker로 캘린더를 만들어 보자
3. 부착되는 옵션

1.datepicker로 할 수 있는 일



전제로서, 캘린더로부터 일자를 원 클릭으로 선택할 수 있는 기능을 사용할 수 있는 것 외에, 드롭 다운 리스트로부터 선택할 수 있는 기능 등 다양한 커스텀을 할 수 있는 것이다.
그 외에도 선택적으로
・영어/일본어 표기로 한다
· 지정된 날짜 형식을 사용할 수 있습니다.
・요일이나 시간도 표시된다
・캘린더를 표시시킬 때의 애니메이션을 설정할 수 있다
· 과거의 날짜는 표시하지 않는다 ... etc

2.datepicker로 캘린더를 만들어 보자



① 우선 필요한 소스를 박는다. ※그대로 코피페로 OK!
1.https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
2.
3.https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css
1.<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
2. 
3.<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

이제 jQueryUI를 사용할 수 있습니다!

②input 탭으로 간단한 캘린더 표기를 해 봅시다!
1.<input type="text" id="datepicker">
1.$('#datepicker').datepicker();

이것으로 캘린더 설치 완료입니다!
이런 느낌↓


【! ! 이것으로 완성! ! 】



그런 다음 원하는대로 사용자 정의해보십시오 ★

좋은 웹페이지 즐겨찾기