HTML [Javascript] jQuery 달력 위젯 datepicker 사용하기

2024.08.13 19:22

[Javascript] jQuery 달력 위젯 datepicker 사용하기

datepicker란 jQuery에서 제공하는 위젯 중 하나이다.

사용법은

1. import

<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>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">

2. script

<script>
$(document).ready(function() {
    $("#datepicker").datepicker();
});
</script>

3. html

<body>
    날짜 선택: <input type="text" id="datepicker">
</body>

가장 기본 형태의 datepicke이다.

여기서 옵션을 추가할 수 있다.

1. showOn

showOn: "button" ->button 클릭 시 날짜 위젯을 보여준다.

showOn:"both" => button이나 text상자 클릭 시 날짜 위젯을 보여준다.

    $("#datepicker").datepicker({
        showOn:"button"
    });

2. buttonImage

버튼 이미지

    $("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
    });

3. buttonImageOnly

버튼 이미지만 보이게 하기

    $("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
    });

4. changeMonth, changeYear

년, 월을 셀렉트박스로 변경

 $("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true 
    });

5. yearRange

연도의 선택 범위

$("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,yearRange:"-10:+100" /*2009 ~ 2119*/
        ,yearRange:"2009:9999" /*2009 ~ 9999*/
         /*위의 방식 아래 방식 둘다 가능*/
    });

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

6. nextText, prevText

화살표의 툴팁내용

$("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,nextText:"다음"
        ,prevText:"이전"
        
    });

7. numberOfMonths:[n,m]

n X m 으로 달력을 보여줌

$(document).ready(function() {
    $("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,nextText:"다음"
        ,prevText:"이전"
        ,numberOfMonths:[2,3]
    });
});

8. dateFormat

날짜 형식

$("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,dateFormat:"dd-mm-yy"
    });

9. dayNames, dayNamesMin,monthNamesShort

dayNames: 요일 툴팁

dayNamesMin: 표시되는 요일

monthNamesShort : 표시되는 월

 $("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,dateFormat:"dd-mm-yy"
        ,dayNames : ['월요일','화요일','수요일','목요일','금요일','토요일','일요일']
        ,dayNamesMin : ['월','화','수','목','금','토','일']
        ,monthNamesShort:  [ "1월", "2월", "3월", "4월", "5월", "6월","7월", "8월", "9월", "10월", "11월", "12월" ]
    });

10. showOtherMonths

이전달, 다음달의 날짜 표시여부

$("#datepicker").datepicker({
        showOn:"button"
        , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
        ,buttonImageOnly: true
        ,changeMonth:true
        ,changeYear:true
        ,dateFormat:"dd-mm-yy"
        ,dayNames : ['월요일','화요일','수요일','목요일','금','토','일']
        ,dayNamesMin : ['월','화','수','목','금','토','일']
        ,monthNamesShort:  [ "1월", "2월", "3월", "4월", "5월", "6월","7월", "8월", "9월", "10월", "11월", "12월" ]
        ,showOtherMonths:true
    });

이 외에도 여러가지 옵션들이 있으니, 직접 실행해보면 된다.

[출처] https://beautifulhill.tistory.com/12

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
31	[web개발] [jQuery] Select박스 option 값 선택하기	졸리운_곰	2021.10.20	651
30	[web개발][javascript][JQuery] textarea 값 설정및 값 가져오기	졸리운_곰	2021.10.19	441
29	[javascript][jQuery] 제이쿼리(jQuery) 선택자 - #1	졸리운_곰	2021.09.07	570
28	[HTML5, Javascript, Jquery] Add item from array to list when button is clicked in jQuery	졸리운_곰	2021.06.01	739
27	textarea 태그에 값을 넣고 뺄때 아니면 개행문자 '\n'이 혼란이 온다	졸리운_곰	2019.04.08	692
26	jQuery ready와 load의 차이	졸리운_곰	2019.03.29	733
25	How can I detect if a selector returns null?	졸리운_곰	2019.03.25	454
24	jQuery.isEmptyObject()	졸리운_곰	2019.03.24	793
23	[jQuery]요소를 추가하는 메소드(append, prepend, after, before)	졸리운_곰	2019.03.10	575
22	jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드	졸리운_곰	2019.03.10	586
21	How do you convert a jQuery object into a string?	졸리운_곰	2019.03.10	454
20	JQuery 오브젝트 셀렉트한 select object의 내용 확인	졸리운_곰	2019.03.10	600
19	JQuery Object 선언 : jQuery creating objects [duplicate]	졸리운_곰	2019.03.06	542
18	[제이쿼리] 태그 및 요소 삭제, Remove()	졸리운_곰	2019.03.06	848
17	jQuery .each문(for문) 사용시 break, continue를 하려면?	졸리운_곰	2019.03.06	742
16	jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드	졸리운_곰	2019.03.06	543
15	[jQuery] 선택자에 변수 넣기	졸리운_곰	2019.03.04	640
14	JQuery로 radio 버튼의 값 가져오기 : How to get the value of selected radio button in a group using jQuery	졸리운_곰	2019.01.10	532
13	Ajax replace instead of append 그리고 jquery .append(Html). 에서 class 적용 적용	졸리운_곰	2019.01.07	625
12	[jQuery] Ajax 방법	졸리운_곰	2018.08.03	655

첫 페이지 1 2 끝 페이지

쓰기

태그