지

datepicker 년월

datepicker.png

datepicker 중

년과 월을 선택하는 샘플입니다.

월일은 많은데 년월이 가끔 필요할때가 있어서 업로드합니다

 

[code]

<html>
<head><title>샘플</title>
    <link href="./css/jquery-ui.css" rel="stylesheet" type="text/css">
    <style>
        #monthpicker {
            width: 60px;
        }
    </style>
</head>

<body>
    년월 <input id="monthpicker" type="text" /><br>
    년월일 <input id="ymdpicker" type="text" class="input-date" />
    
    <script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="./js/jquery.mtz.monthpicker.js"></script>
    <script>

     $(function () {
        /* MonthPicker 옵션 */
        options = {
            pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory
            selectedYear: 2023,
            startYear: 2023,
            finalYear: 2030,
            monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
        };
        
        /* MonthPicker Set */
        $('#monthpicker').monthpicker(options);    

        //모든 datepicker에 대한 공통 옵션 설정
        $.datepicker.setDefaults({
            dateFormat: 'yymmdd' //Input Display Format 변경
            , 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:일년후)
        });

        $(".input-date").datepicker();


     });
        
    </script>
</body>
</html>

[/code]

첨부파일

datepicker.png (6.7 KB)
21회 2023-01-11 00:58
샘플.zip (144.6 KB) 125회 2023-01-11 00:58
|

댓글 4개

오호 아주 좋습니다!!~
^^ 유용하게 사용하겠습니다
좋은 정보 감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.
+
제목 글쓴이 날짜 조회
23-01-27 조회 7,022
23-01-25 조회 6,383
23-01-23 조회 6,412
23-01-23 조회 5,909
23-01-21 조회 6,454
23-01-19 조회 6,101
23-01-18 조회 5,373
23-01-16 조회 6,223
23-01-16 조회 5,000
23-01-16 조회 5,419
23-01-16 조회 5,603
23-01-12 조회 5,831
23-01-11 조회 8,133
22-12-20 조회 8,294
23-01-10 조회 5,752
23-01-09 조회 5,431
23-01-09 조회 5,046
22-12-31 조회 6,832
22-12-30 조회 5,575
22-12-30 조회 6,411
22-12-28 조회 6,972
22-12-26 조회 5,174
22-12-26 조회 5,487
22-12-24 조회 5,794
22-12-22 조회 6,192
22-12-20 조회 5,286
22-12-19 조회 5,796
22-12-17 조회 7,015
22-12-16 조회 5,335
22-12-16 조회 6,933