[jQuery UI] 🗓️ Datepicker 라이브러리 사용법

Daisy🌷·2024년 2월 21일

datepicker jQueryUI jquery

📚 archive📚

목록 보기

5/14

🗓️ Datepicker란?

사용자가 캘린더에서 날짜를 선택할 수 있는 jQuery 기반의 라이브러리

🗓️ Datepicker 위젯 적용하기

1. jQuery, jQuery UI 파일을 다운받아 웹 페이지에 로드

jQuery는 자바스크립트 라이브러리이므로, jQuery 파일은 자바스크립트 파일(.js 파일) 형태로 존재한다. 따라서 웹 페이지에서 jQuery를 사용하기 위해서는 jQuery 파일을 먼저 웹 페이지에 로드(load)해야 한다.
최신 버전의 jQuery 파일은 공식 사이트에서 다운받을 수 있다.
최신 버전의 jQuery UI 파일도 마찬가지로 공식 사이트에서 다운받을 수 있다.
다운받은 파일을 서버에 저장하고 <script> 태그와 <link> 태그를 웹 페이지의 <head> 태그 내에 삽입하면 된다.
🚨 jQuery UI는 jQuery를 기반으로 만들어졌기 때문에 jQuery UI를 사용하려면 먼저 jQuery를 load 해야 한다. 🚨

👩🏻‍💻 예제 코드

<head>
  <link href="파일경로/제이쿼리-ui-css-파일명.css" rel="stylesheet" type="text/css"/>
  // jQuery 먼저 load
  <script src="/파일경로/제이쿼리-파일명.js" type="text/javascript"></script>
  // jQuery UI load
  <script src="/파일경로/제이쿼리-UI-파일명.js" type="text/javascript"></script>
</head>

2. datepicker를 적용할 input 요소에 대해 datepicker를 호출

👩🏻‍💻 예제 코드

<script>
  $(function () {
    $("#datepicker").datepicker({
      showOn: "both" // button > 버튼을 클릭할 때 datepicker 표시. focus > input 필드가 포커스를 받을 때 표시. both > 두 이벤트 중 하나가 발생할 때 표시.
      , buttonImage: "../images/calender.svg" // datepicker를 사용할 버튼 이미지의 URL
      , buttonImageOnly: true // 위에서 설정한 buttonImage를 button 요소 안에 렌더링 하지 않고 단독으로 렌더링
      , buttonText: "선택" // 버튼에 표시되는 글자
      , changeYear: true // dropdown으로 year 선택 가능
      , changeMonth: true // dropdown으로 month 선택 가능
      , dateFormat: 'yy-mm-dd' // 표시되는 날짜의 형식
      , dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'] // 일요일부터 시작하는 요일 이름 목록
      , dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'] // Datepicker 내에서 열 머리글로 사용할 수 있도록 일요일부터 시작하는 최소화된 요일 이름 목록 
      , maxDate: "+5y" // 선택할 수 있는 최대 날짜 (+1D:하루후, -1M:한달후, -1Y:일년후)    
      , minDate: "-5Y" // 선택할 수 있는 최소 날짜 (-1D:하루전, -1M:한달전, -1Y:일년전)
      , monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] // 1월부터 시작하는 월 이름 목록
      , monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] // Datepicker header의 month에 사용되는 월 이름 목록
      , showMonthAfterYear: true // Datepicker header에서 표시 순서가 연도-월이 되도록
      , showOtherMonths: true // 현재 월의 시작 또는 끝에 다른 월의 날짜를 표시하겠다. (선택은 불가. 이러한 날짜를 선택할 수 있게 하려면 selectOtherMonths 옵션을 사용할 것)
      , yearSuffix: "년" // Datepicker header의 연도 뒤에 표시할 추가 텍스트
    });
    // Datepicker의 default 날짜를 설정
    $('#datepicker').datepicker('setDate', 'today'); // (-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
  });
</script>

<input id="datepicker">

🗓️ 검색할 날짜의 범위를 선택하는 경우

👩🏻‍💻 예제 코드

<script>
  $(function () {
    $("#datepicker-from").datepicker({
      showOn: "both" // button > 버튼을 클릭할 때 datepicker 표시. focus > input 필드가 포커스를 받을 때 표시. both > 두 이벤트 중 하나가 발생할 때 표시.
      , buttonImage: "../images/calender.svg" // datepicker를 사용할 버튼 이미지의 URL
      , buttonImageOnly: true // 위에서 설정한 buttonImage를 button 요소 안에 렌더링 하지 않고 단독으로 렌더링
      , buttonText: "선택" // 버튼에 표시되는 글자
      , changeYear: true // dropdown으로 year 선택 가능
      , changeMonth: true // dropdown으로 month 선택 가능
      , dateFormat: 'yy-mm-dd' // 표시되는 날짜의 형식
      , dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'] // 일요일부터 시작하는 요일 이름 목록
      , dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'] // Datepicker 내에서 열 머리글로 사용할 수 있도록 일요일부터 시작하는 최소화된 요일 이름 목록 
      , maxDate: "+5y" // 선택할 수 있는 최대 날짜 (+1D:하루후, -1M:한달후, -1Y:일년후)    
      , minDate: "-5Y" // 선택할 수 있는 최소 날짜 (-1D:하루전, -1M:한달전, -1Y:일년전)
      , monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] // 1월부터 시작하는 월 이름 목록
      , monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] // Datepicker header의 month에 사용되는 월 이름 목록
      , showMonthAfterYear: true // Datepicker header에서 표시 순서가 연도-월이 되도록
      , showOtherMonths: true // 현재 월의 시작 또는 끝에 다른 월의 날짜를 표시하겠다. (선택은 불가. 이러한 날짜를 선택할 수 있게 하려면 selectOtherMonths 옵션을 사용할 것)
      , yearSuffix: "년" // Datepicker header의 연도 뒤에 표시할 추가 텍스트
    });
    // Datepicker의 default 날짜를 설정
    $("#datepicker-to").datepicker({
      showOn: "both" // button > 버튼을 클릭할 때 datepicker 표시. focus > input 필드가 포커스를 받을 때 표시. both > 두 이벤트 중 하나가 발생할 때 표시.
      , buttonImage: "../images/calender.svg" // datepicker를 사용할 버튼 이미지의 URL
      , buttonImageOnly: true // 위에서 설정한 buttonImage를 button 요소 안에 렌더링 하지 않고 단독으로 렌더링
      , buttonText: "선택" // 버튼에 표시되는 글자
      , changeYear: true // dropdown으로 year 선택 가능
      , changeMonth: true // dropdown으로 month 선택 가능
      , dateFormat: 'yy-mm-dd' // 표시되는 날짜의 형식
      , dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'] // 일요일부터 시작하는 요일 이름 목록
      , dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'] // Datepicker 내에서 열 머리글로 사용할 수 있도록 일요일부터 시작하는 최소화된 요일 이름 목록 
      , maxDate: "+5y" // 선택할 수 있는 최대 날짜 (+1D:하루후, -1M:한달후, -1Y:일년후)    
      , minDate: "-5Y" // 선택할 수 있는 최소 날짜 (-1D:하루전, -1M:한달전, -1Y:일년전)
      , monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] // 1월부터 시작하는 월 이름 목록
      , monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] // Datepicker header의 month에 사용되는 월 이름 목록
      , showMonthAfterYear: true // Datepicker header에서 표시 순서가 연도-월이 되도록
      , showOtherMonths: true // 현재 월의 시작 또는 끝에 다른 월의 날짜를 표시하겠다. (선택은 불가. 이러한 날짜를 선택할 수 있게 하려면 selectOtherMonths 옵션을 사용할 것)
      , yearSuffix: "년" // Datepicker header의 연도 뒤에 표시할 추가 텍스트
    });
    // Datepicker의 default 날짜를 설정  
    $('#datepicker-from').datepicker('setDate', 'today'); // (-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
    $('#datepicker-to').datepicker('setDate', 'today'); // (-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)  
  });
</script>

<label for="datepicker-from">From</label>
<input id="datepicker-from">
<label for="datepicker-to">to</label>
<input id="datepicker-to">

jQuery API documentation에 options와 methods에 대한 설명이 자세히 나와있으니 참고해서 알맞게 custom하면 된다! 😊

참고 자료

Daisy🌷

Frontend Developer

이전 포스트

[CSS] 사용자 지정 CSS 속성 사용하기 (변수)

다음 포스트

[jQuery UI] 🗓️ Datepicker 라이브러리 사용법

📚 archive📚

🗓️ Datepicker란?

🗓️ Datepicker 위젯 적용하기

1. jQuery, jQuery UI 파일을 다운받아 웹 페이지에 로드

👩🏻‍💻 예제 코드

2. datepicker를 적용할 input 요소에 대해 datepicker를 호출

👩🏻‍💻 예제 코드

🗓️ 검색할 날짜의 범위를 선택하는 경우

👩🏻‍💻 예제 코드

참고 자료

[CSS] 사용자 지정 CSS 속성 사용하기 (변수)

[CSS] table tbody scroll 하는 법

0개의 댓글