[Jquery UI] datepicker 달력 사용법 및 옵션

V레니V 2020. 7. 8. 01:59

이번 포스트에서는 JQuery에서 제공하는 위젯 중에 하나로써 날짜를 선택할 때 사용자에게 편의성을 제공하는 datepicker에 대해서 알아보도록 하겠습니다. 날짜 데이터를 사용자로부터 입력받을 때 select box 형태로 날짜 데이터를 제공하기도 하지만 마우스로 달력 UI에서 날짜를 선택하도록 데이터를 제공하기도 합니다.

사용법에 대해서 알아보도록 합시다.

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://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.jqeury.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function(){
            $("#datepicker").datepicker();
        });
    </script>
</head>
<body>
    <p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

<head></head> 사이에 jquery ui의 link와 script를 삽입합니다. 위의 코드를 실행하면 아래와 같은 달력 UI가 생성됩니다.

datepicker는 다양한 옵션을 제공합니다. 자주 사용하는 옵션을 대해서 알아봅시다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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({
    	  changeMonth: true, 
    	  changeYear: true,
    	  minDate: '-50y',
    	  nextText: '다음 달',
    	  prevText: '이전 달',
    	  yearRange: 'c-50:c+20',
    	  showButtonPanel: true, 
    	  currentText: '오늘 날짜',
    	  closeText: '닫기',
    	  dateFormat: "yy-mm-dd",
    	  showAnim: "slide",
    	  showMonthAfterYear: true, 
    	  dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'],
    	  monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
    	 });
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

changeMonth : select box 월표 시 유무(true/false)
changeYear : select box 년표시 유무(true/false)
minDate : 현재 날짜로부터 N 년까지 표시
nextText : next 아이콘 툴팁
prevText : prev 아이콘 툴팁
yearRange : 현재 연도를 기준으로 +N 년 -N 년 표시
showBottonPanel : 달력 하단에 버튼 표시
currentText : 오늘 날짜 클릭 시 클릭 시 오늘 날짜로 이동
dateFormat : 텍스트 필드에 입력되는 날짜 형식
showAnim : 달력에 애니메이션 적용
showMonthAfterYear : 월, 년 순서의 select box를 년, 월로 순서 변경 (true/false)
dayNamesMin : [요일] 한글화
monthNamesShort : [월] 한글화

한글화 및 다양한 옵션을 사용하여 datepicker ui를 변경해보았습니다. 자주 사용하는 옵션을 기준으로 정리를 하였고 이외에도 더 다양한 옵션들이 있습니다. datepicker의 몇 가지 옵션을 추가하였을 뿐인데 사용자가 사용하기에 좀 더 편리해지고 업무의 효율성도 높일 수 있습니다.

정독해주셔서 감사합니다. :)

저작자표시 (새창열림)