datepicker #
Find similar titles

Structured data

Category: Programming

Datepicker
1. Datepicker란?
2. JQuery-Datepicker
  1. 사용법
  2. 옵션

Datepicker #

Datepicker란? #

날짜를 다룰 때 UI 형식으로 쉽게 날짜를 선택하도록 도와주는 역할을 한다.
datepicker를 이용하면 많은 기능을 포함한 디자인된 달력을 간단한 코딩으로 만들 수 있다.
웹사이트에서 회원가입이나, 검색하는 곳에서 조회조건으로 달력은 정말 유용한 자원으로 사용된다.

JQuery-Datepicker #

JQuery에서 제공하는 위젯 중 하나이다.
위젯 : 프로그래밍에서 위젯은 작은 프로그램을 의미하고, 사용자와 컴퓨터가 상호 작용하는 인터페이스 요소.

사용법 #

#!javascript
//jquery 기본 js파일
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0
/jquery.min.js"></script>

//jquery ui js파일
<script  src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui
/1.12.1/jquery-ui.min.js"></script>

//jquery ui css파일
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs
/jqueryui/1.12.1/jquery-ui.min.css"/>

사용할 버전에 맞춰 import

#!javascript
<input type="text" class="datepicker"/>
<script>
$(function(){
    $('.datepicker').datepicker();
})
</script>

jQuery-ui는 사용법이 간단하다.
input 요소를 만들고 $('.datepicker').datepicker();를 입력한다.

옵션 #

#!javascript
$("#Date").datepicker({

    showOn: "both", // 버튼과 텍스트 필드 모두 캘린더를 보여준다.

    buttonImage: "/application/db/jquery/images/calendar.gif", 
    // 버튼 이미지

    buttonImageOnly: true, // 버튼에 있는 이미지만 표시한다.

    changeMonth: true, // 월을 바꿀 수 있는 셀렉트 박스를 표시한다.

    changeYear: true, // 년을 바꿀 수 있는 셀렉트 박스를 표시한다.

    minDate: '-100y', // 현재 날짜로부터 100년 이전까지 년을 표시한다.

    nextText: '다음 달', // next 아이콘의 툴팁.

    prevText: '이전 달', // prev 아이콘의 툴팁.

    numberOfMonths: [1,1], 
    // 한 번에 얼마나 많은 월을 표시할 것인가. 
       [2,3] 일 경우, 2(행) x 3(열) = 6개의 월을 표시한다.

    stepMonths: 3, 
    // next, prev 버튼을 클릭했을 때 얼마나 많은 월을 이동하여 표시하는가.

    yearRange: 'c-100:c+10', 
    // 년도 선택 셀렉트박스를 현재 연도에서 이전, 
       이후로 얼마의 범위를 표시할 것인가.

    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월'] 
    // 월의 한글 형식.

    yearRange: "2010:2013" //연도 범위

 });

jQuery-Datepicker Options < 더 많은 옵션을 확인할 수 있습니다.

Structured data

Table of Contents

Datepicker #

Datepicker란? #

JQuery-Datepicker #

사용법 #

옵션 #