Datepicker + 년월만 선택하기

$(document).ready(function() {

//******************************************************************************
// 상세검색 달력 스크립트
//******************************************************************************
var clareCalendar = {
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: 'Wk',
autoSize: false, //오토리사이즈(body등 상위태그의 설정에 따른다)
changeMonth: true, //월변경가능
changeYear: true, //년변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
buttonImageOnly: false, //이미지표시
buttonText: '', //버튼 텍스트 표시
// buttonImage: '/admin/images/btn_calbt.gif', //이미지주소
showOn: 'both', //엘리먼트와 이미지 동시 사용(both,button)
// yearRange: '1900:<?php echo $Year;?>', //1990년부터 2020년까지
dateFormat: 'yy-mm-dd', //형식(20120303)
yearRange: "-100:+0", //연도 범위
// yearSuffix: '년'
};

$("<?=$calId?>").datepicker(clareCalendar);
$("<?=$calId?>").datepicker("option", "defaultDate", new Date(1980, 0, 1));

});


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="ko-KR">
<head>
    <meta charset="utf-8" />
    <title>title</title>
    <style type="text/css">
        button.ui-datepicker-current,
        button.ui-datepicker-trigger,
        table.ui-datepicker-calendar { display:none; }
    </style>
</head>
<body>
    <div id="document_wrap">
        <div id="content_box">
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
            <script>
                $(document).ready(function () {
                    $.datepicker.monthpicker = {
                        closeText: '닫기',
                        nextText : '다음 달',
                        prevText : '이전 달',
                        currentText : "오늘",
                        changeMonth : true,
                        changeYear : true,
                        monthNames : ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
                        monthNamesShort : ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
                        dayNames : [ "일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일" ],
                        dayNamesShort : ['일', '월', '화', '수', '목', '금', '토'],
                        dayNamesMin : ['일', '월', '화', '수', '목', '금', '토'],
                        weekHeader : "주",
                        firstDay : 0,
                        isRTL : false,
                        showMonthAfterYear : true,
                        yearSuffix : "년",
                        showOn: 'both',
                        // buttonText: "달력",
                        showButtonPanel: true,
                        dateFormat: 'yy-mm',          
                        yearRange: "-10:+0",
                  };
                    
              $.datepicker.setDefaults($.datepicker.monthpicker);
 
                    var datepicker_default = {
                        showOn: 'both',
                        buttonText: "달력",
                        currentText: "이번달",
                        changeMonth: true,
                        changeYear: true,
                        showButtonPanel: true,
                        yearRange: 'c-99:c+99',
                        showOtherMonths: true,
                        selectOtherMonths: true
                    }
                    datepicker_default.closeText = "선택";
                    datepicker_default.dateFormat = "yy-mm";
                    datepicker_default.onClose = function (dateText, inst) {
                        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                        $(this).datepicker("option", "defaultDate", new Date(year, month, 1));
                        $(this).datepicker('setDate', new Date(year, month, 1));
                    }
                    datepicker_default.beforeShow = function () {
                        var selectDate = $("#sdate").val().split("-");
                        var year = Number(selectDate[0]);
                        var month = Number(selectDate[1]) - 1;
                        $(this).datepicker("option", "defaultDate", new Date(year, month, 1));
                    }
                    $(".month_picker").datepicker(datepicker_default);
                });
            </script>
            <form name="frmEX">
                년-월 : 
                <input type="text" name="sdate" id="sdate" size="7" maxlength="7" value="2018-10" />
                <br />
                년, 월만 선택 할수 있도록 변경하였습니다.
            </form>
        </div>
    </div>
</body>
</html>
 
 
 

 

datepicker옵션

옵션설명사용예
altField$( ".selector" ).datepicker({
    altField: ".selecter"
});		선택한 날짜가 해당 폼에 입력된다.
altFormat$( ".selector" ).datepicker({
    altFormat: "yyyy-mm-dd"
});		altField의 폼에 입력될 날짜의 형식
beforeShow$( ".selector" ).datepicker({
    beforeShow: function(input, inst) {
        // input은 폼
        // inst는 datepicker의 여러 값이 있던데 
        //          아직 쓸모를 찾지 못했다.
    }
});		달력이 그려지기 전에 처리할 일들을 지정할 수 있다.
buttonImage$( ".selector" ).datepicker({ 
    buttonImage: "/images/datepicker.gif" 
});		　
buttonImageOnly$( ".selector" ).datepicker({
    buttonImageOnly: true 
});		　
buttonText$( ".selector" ).datepicker({ 
    buttonText: "선택" 
});		　
changeMonth$( ".selector" ).datepicker({ 
    changeMonth: true 
});		셀렉트박스로 월 변경 여부
changeYear$( ".selector" ).datepicker({ 
    changeYear: true 
});		셀렉트박스로 연도 변경 여부
closeText

$( ".selector" ).datepicker({ 
    closeText: "닫기" 
});

 

constrainInput$( ".selector" ).datepicker({ 
    constrainInput: false 
});		형식외 텍스트 입력제한. 디폴트 true
currentText

$( ".selector" ).datepicker({ 
    currentText: "Now" 

});

　
dateFormat$( ".selector" ).datepicker({ 
    dateFormat: "yy-mm-dd" 
});		　
dayNames$( ".selector" ).datepicker({ 
    dayNames: 
        [ "일요일", "월요일", "화요일", "수요일", 
        "목요일", "금요일", "토요일" ] 
});		　
dayNamesMin$( ".selector" ).datepicker({ 
    dayNamesShort: 
        [ "S", "M", "T", "W", "T", "F", "Sa" ] 
});		　
dayNamesShort$( ".selector" ).datepicker({ 
    dayNamesShort: 
        [ "일", "월", "화", "수", "목", "금", "토" ] 
});		　
defaultDate$( ".selector" ).datepicker({ 
    defaultDate: +7 
});		달력 기본 출력될때 기준일. Date타입, 숫자, String 다 가능하다.
duration$( ".selector" ).datepicker({ 
    duration: "slow" 
});		달력 나타나는 속도, "slow", "normal", "fast"
firstDay$( ".selector" ).datepicker({ 
    firstDay: 1 
});		주의 시작일을 일요일로 하려면 0, 월요일은 1
gotoCurrent$( ".selector" ).datepicker({ 
    gotoCurrent: true 
});		　
maxDate$( ".selector" ).datepicker({ 
    maxDate: "+1m +1w" 
});		　
minDate$( ".selector" ).datepicker({ 
    minDate: new Date(2012, 1 - 1, 1) 
});		　
monthNames$( ".selector" ).datepicker({
    monthNames: 
        [ "1월", "2월", "3월", "4월", "5월", "6월", 
        "7월", "8월", "9월", "10월", "11월", "12월" ] 
});		　
monthNamesShort$( ".selector" ).datepicker({ 
    monthNamesShort: 
        [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun", 
        "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ] 
});		　
nextText$( ".selector" ).datepicker({ 
    nextText: "차월" 
});		　
numberOfMonths$( ".selector" ).datepicker({ 
    numberOfMonths: [ 2, 3 ] 
});		여러개월 달력을 표시
onChangeMonthYear$( ".selector" ).datepicker({
    onChangeMonthYear: function(year, month, inst) {
        // year 년도 숫자
        // month 월 숫자
        // inst는 datepicker의 여러 값이 있던데 
        //          아직 쓸모를 찾지 못했다.
    }
});		달력에서 연월을 셀렉트 박스로 바꿀 수 있을때 바꿀때 이벤트
onClose$( ".selector" ).datepicker({
    onClose: function(dateText, inst) {
        // dateText는 날짜 스트링
        // inst는 datepicker의 여러 값이 있던데 
        //          아직 쓸모를 찾지 못했다.
    }
});		　
onSelect$( ".selector" ).datepicker({
    onSelect: function(dateText, inst) {
        // dateText는 날짜 스트링
        // inst는 datepicker의 여러 값이 있던데 
        //          아직 쓸모를 찾지 못했다.
    }
});		　
prevText$( ".selector" ).datepicker({ 
    prevText: "전월" 
});		　
selectOtherMonths$( ".selector" ).datepicker({ 
    selectOtherMonths: true 
});		다른 달도 출력시 선택가능 여부. 디폴트는 false
showAnim$( ".selector" ).datepicker({ 
    showAnim: "fold" 
});		달력 에니메이션 효과. show(디폴트), slideDown, fadeIn etc..
showCurrentAtPos$( ".selector" ).datepicker({ 
    showCurrentAtPos: 3 
});		여러 달의 달력을 한꺼번에 띄울 경우 시작월을 현재를 기준으로 달 수. 
0이 현재월. -5면 5개월 전, 3이면 3개월 후
showOptions$( ".selector" ).datepicker({ 
    showOptions: { direction: "up" } 
});		달력 보여줄때 이벤트 옵션
showOtherMonths$( ".selector" ).datepicker({ 
    showOtherMonths: true 
});		월 1일 이전, 월 말일 이후 빈칸에 이전달, 다음달 날짜 출력 여부
showWeek$( ".selector" ).datepicker({ 
    showWeek: true 
});		주수 출력 여부
stepMonths$( ".selector" ).datepicker({ 
    stepMonths: 3 
});		달력에서 좌우 선택시 이동할 개월 수
weekHeader$( ".selector" ).datepicker({ 
    weekHeader: "주" 
});		　
yearRange$( ".selector" ).datepicker({ 
    yearRange: "2010:2013" 
});		연도 범위
yearSuffix$( ".selector" ).datepicker({ 
    yearSuffix: "년" 
});		　
0
 0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
목록 이전글 다음글

HTML/CSS/기타

번호 제목 글쓴이 날짜 조회수
46 JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 관리자 09-02 46
45 web chart - 실시간 차트 관리자 07-25 123
44 비동기 프로그래밍 관리자 07-25 94
43 table thead 고정과 tbody 스크롤 관리자 07-23 131
42 datepicker 사용하여 공휴일 직접 지정하기 관리자 06-11 192
41 Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리 관리자 03-06 384
40 JSPDF 사용법(Javascript pdf) 관리자 03-04 534
39 FullCalendar(풀캘린더) 어거지 사용법 관리자 01-25 574
38 JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${} 관리자 12-28 412
37 [CSS] 가로 스크롤 구현하기 관리자 12-27 541
36 JCROP을 이용한 업로드한 크롭( CROP ) 하기 관리자 12-27 483
35 제이쿼리 - 모달 다이아로그 및 여러 알림창들 관리자 12-21 245
34 Javascript/jQuery 이미지 회전 돋보기 관리자 11-07 572
33 Resolving the Issue of Fakepath in JavaScript 관리자 10-26 278
32 div 및 요소 화면 중앙에 위치시키기 관리자 10-21 311
31 [Jquery] 체크박스 전체 체크 , 해제 하는 방법 관리자 10-19 310
30 display 스타일 속성 사용하여 행 숨기기/보이기 관리자 09-16 616
29 자주 사용하는 비주얼 스튜디오 코드(Visual Studio Code, VSC, vscode) 단축키 정리 관리자 09-14 708
28 div 2개 나란히 정렬하는 방법 관리자 09-09 466
27 HTML, CSS - 헤더컬럼 고정형 table 구성하기 관리자 09-06 346
목록

로그인

최근 게시물

최근 댓글

Tag Clouds