[JS Library] jQuery UI - Datepicker

소이뎁·2023년 11월 10일

JS Library

목록 보기

2/3

📍 jQuery UI & Datepicker

jQuery UI는 JavaScript와 jQuery 라이브러리를 기반으로 한 사용자 인터페이스 요소 및 플러그인을 제공하는 라이브러리이다.

Datepicker는 jQuery UI에 포함된 위젯 중 하나이다.

Datepicker는 사용자가 날짜를 선택할 수 있는 UI 컴포넌트를 제공한다.

📍 적용 방법

1️⃣ jQuery 원본을 import 한다.

2️⃣ datepicker을 import 한다. (jquery-ui.css, jquery-ui.js)

3️⃣ 적용할 input 요소에 대해 datepicker()를 호출한다.

🚩 주의할 점

jQuery UI는 jQuery를 기반으로 만들어졌으므로 jQuery UI를 사용하려면 먼저 jQuery(원본)를 import 해야 한다.

jQuery는 중복으로 import 하면 안 되므로 이미 다른 곳에서 import 되어 있다면 해당 import를 생략해야 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DatePicker Example</title>
  
    <!-- 1️⃣ jQuery CDN Link -->
	<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

	<!-- 2️⃣ datepicker -->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
	<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
        $(document).ready(function() {
            // 3️⃣ datepicker를 적용할 input 요소에 대해 datepicker를 호출
            $("#input1").datepicker();
        });
    </script>
</head>
<body>
	<!-- 날짜를 선택할 수 있는 input 요소 -->
	<input type="text" id="input1" placeholder="날짜 선택">
</body>
</html>

📍 option 적용 방법

생성 시 옵션 설정: $(셀렉터).datepicker(옵션 객체)

옵션 하나만 변경: $(셀렉터).datepicker("option", 옵션 키, 옵션 값)

옵션 전체 재설정: $(셀렉터).datepicker("option", 옵션 객체)

기본 옵션 일괄 적용: $.datepicker.setDefaults(옵션 객체)

// 생성 시 옵션 설정
$("#datepicker").datepicker({
    dateFormat: "yy-mm-dd",
    minDate: new Date(),
    maxDate: "+1M"
});

// 옵션 하나만 변경
$("#datepicker").datepicker("option", "minDate", new Date("2023-11-01"));

// 옵션 전체 재설정
$("#datepicker").datepicker("option", {
    dateFormat: "dd/mm/yy",
    minDate: "-1W"
});

// 기본 옵션 일괄 적용
$.datepicker.setDefaults({
    dateFormat: "yy-mm-dd",
    minDate: new Date(),
    maxDate: "+1M"
});

References

🔗 https://jqueryui.com/datepicker
🔗 https://api.jqueryui.com/datepicker/#method-option

소이뎁

이전 포스트

[JS Library] jQuery

다음 포스트

[JS Library] jQuery UI - Datepicker

JS Library

📍 jQuery UI & Datepicker

📍 적용 방법

📍 option 적용 방법

References

[JS Library] jQuery

[JS Library] Prism.js

0개의 댓글