![[Javascript] 날짜 선택기 Datepicker에 대해 알아보고 JQuery CDN으로 간단하게 만들기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcyKkSB%2FbtrIOwCZhd1%2FVBiWQq0UdVWEOpcfskMOmK%2Fimg.png)
안녕하세요
이번 시간에는 Javascript로 간단하게 날짜 선택기인 Datepicker에 대해 알아보고 실습을 진행하겠습니다.
1. 날짜 선택기 Datepicker 란?
Datepicker는 웹 페이지에서 사용자가 날짜를 선택할 수 있도록 하는 기능입니다. 사용자가 입력란을 클릭하면 날짜 선택기가 나타나고, 날짜를 선택하면 해당 날짜가 입력란에 자동으로 입력됩니다.
Datepicker를 구현하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 jQuery UI Datepicker 플러그인을 사용하는 것입니다. 이 플러그인은 jQuery와 함께 사용할 수 있으며, 다양한 날짜 형식, 날짜 범위, 다국어 지원 등 다양한 기능을 제공합니다.
Datepicker는 위의 사진에서 보이는 것처럼 Input 속성을 선택하면 날짜 선택기가 나오는 것을 말합니다.
2. Jquery CDN 삽입하기
가장 먼저 해주어야 할 것은 Jquery CDN을 선언해 주는 것입니다. 그러면 CDN을 통해 JQuery 및 JQuery UI 라이브러리를 로드합니다.
1. Jqery CDN과 Script 삽입하기
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js" charset = "UTF-8"></script>
<link
rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" });
});
</script>
<script>
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
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월'],
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
showMonthAfterYear: true,
yearSuffix: '년'
});
$(function() {
$("#datepicker").datepicker();
});
</script>
위의 코드에서처럼 Jquery CDN을 <Head></Head> 사이에 입력해 주세요. 그 후에 Datepicker 함수를 만들고 datepicker.setDefaults를 설정해 줍니다.
2. body 구성하기
<body>
<input type="text" id="datepicker">
</body>
그 후 Input 속성을에 id 값으로 'datepicker'를 주면 날짜 선택기를 간단하게 사용할 수 있습니다. 위 코드를 실행하면, input 요소를 클릭하면 jQuery UI Datepicker가 표시되고, 사용자가 날짜를 선택하면 해당 날짜가 입력란에 자동으로 입력됩니다. 필요에 따라 옵션을 추가하여 날짜 형식, 날짜 범위 등을 지정할 수 있습니다.
이렇게 Input 폼을 누르면 날짜 선택기에서 날짜를 선택할 수 있습니다.
날짜를 선택하여 클릭해 주면 지정해 준 Format 형태로 날짜가 출력되는 것을 확인할 수 있습니다.
이번 시간에는 Javascript와 Jquery를 이용해서 날짜 선택기인 Datepicker에 대해서 알아보고 간단하게 실습을 진행해봤습니다.
감사합니다.
'Programming > Javascript' 카테고리의 다른 글
[Javascript] Contenteditable에 대해 알아보고 수정 가능한 테이블 만들기 JQuery Editable (1) | 2021.02.24 |
---|
클라우드, 개발, 자격증, 취업 정보 등 IT 정보 공간
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!