Tip/라이브러리

input 태그에 달력으로 날짜 넣기 : datepicker.js

2024. 5. 24.

datepicker

제이쿼리에서 제공하는 날짜 선택 라이브러리. 입력 필드에 직접 날짜를 입력하는 대신, 시각적으로 더 편리한 달력 인터페이스를 통해 날짜를 입력할 수 있기 때문에 직접 입력하는 것 보다 쉽게 입력하고 날짜 입력 형식의 일관성을 유지할 수 있다. input 텍스트 필드에 초점이 맞춰지면 작은 오버레이로 달력 인터페이스가 열린다. 인라인 달력의 경우는 해당 범위에 연결하기만 하면 된다.

check_circle Check

기본 Datepicker는 기본언어가 영어로 되어있기 때문에 날짜는 물론 달력 순서도 월-일-년도 순이다. 때문에 옵션을 이용해서 한국어로 변환 후 사용하는것이 좋다.

사용법

라이브러리 추가하기

<head></head> 태그 사이에 입력한다.

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

파일 직접 다운로드 하기 https://jqueryui.com/download/

check_circle Check

Datepicker는 jQuery 기반이기 때문에 jQuery와 jQuery-UI를 함께 설치해야 한다.

html 작성하기

<body></body> 태그 사이에 입력한다.

<body>
	<input type="text" id="datepicker" name="date">
</body>

js 작성하기

<script></script> 태그 사이, 또는 외부 scipt파일에 입력한다

$(function(){ 
	// 1개 사용
    $("#datepicker").datepicker({ 
        dateFormat: "yyyy-mm-dd", 
        yearRange: "c-2:c+2", 
        minDate: 'd'
    });
    
    
    // 2개 사용
    // 2024-05-25 ~ 2024-12-31
    $("#datepicker1").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 'd', 
        onSelect: function (selected) {
            var dt = new Date(selected);
            dt.setDate(dt.getDate());
            $("#datepicker2").datepicker('option', 'minDate', dt);
        }
    });

    $("#datepicker2").datepicker({
        dateFormat: "yy-mm-dd",
        maxDate: "+3650d"
    });
});

자주쓰는 옵션

옵션명	입력값	설명
dateFormat	'yy-mm-dd'	출력할 날짜 포멧
showOtherMonths	true	빈 공간에 현재월의 앞뒤월의 날짜를 표시
showMonthAfterYear	true	년도 먼저 나오고, 뒤에 월 표시
changeYear	true	콤보박스에서 년 선택 가능
changeMonth	true	콤보박스에서 월 선택 가능
showOn	"both"	button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시
buttonImage	"http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"	버튼 이미지 경로
buttonImageOnly	true	기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
buttonText	"선택"	버튼에 마우스 갖다 댔을 때 표시되는 텍스트
yearSuffix	"년"	달력의 년도 부분 뒤에 붙는 텍스트
monthNamesShort	['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']	달력의 월 부분 텍스트
monthNames	['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']	달력의 월 부분 Tooltip 텍스트
dayNamesMin	['일', '월', '화', '수', '목', '금', '토']	달력의 요일 부분 텍스트
dayNames	['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']	달력의 요일 부분 Tooltip 텍스트
minDate	"-1M"	최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
maxDate	"+1M"	최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)

디자인 참고

코드펜 - datepicker 달력 디자인 모음

datepicker 달력 디자인 모음 디자인 1 디자인 2 디자인 3 디자인 4 디자인 5 참고사이트 CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS an

ninnydesign.tistory.com

저작자표시 비영리 변경금지

닌니디자인의 포스팅을 검색 해주세요.