Web Programming/JavaScript

jQuery 날짜를 지정하는 Datepicker

myHyem 2019. 5. 26. 14:57

요즘은 검색에 Datepicker 를 넣지 않는곳이 없는것 같다

요청사항은 다들 비슷한데 검색해보면 뭔가 요청사항을 이리저리 찢어놓은 느낌이라 붙여보았다

 

  • 데이터 피커에 한글로 표시되게 해주세요 (기타 옵션)

  • 시작일은 해당월에 1일을 Default 로 해주세요

  • 끝일은 당일의 날짜로 해주세요

이 옵션들이 검색하면 꼭 한번에 나오지를 않아서 애먹었다

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
$(function() {
        //모든 datepicker에 대한 공통 옵션 설정
        var thisDate = new Date();
        var thisYear = thisDate.getFullYear();        //해당 연
        var thisMonth = thisDate.getMonth() + 1;    //해당 월
 
        $.datepicker.setDefaults({
            dateFormat: 'yy-mm-dd'         //Input Display Format 변경
            ,showOtherMonths: true         //빈 공간에 현재월의 앞뒤월의 날짜를 표시
            ,showMonthAfterYear:true     //년도 먼저 나오고, 뒤에 월 표시
            ,changeYear: true             //콤보박스에서 년 선택 가능
            ,changeMonth: true             //콤보박스에서 월 선택 가능         
            ,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 텍스트
        });                    
        
        //시작일의 초기값을 설정
        $('#sDatepicker').datepicker({
            onClose: function( selectedDate ) {    
                $("#eDatepicker").datepicker( "option""minDate", selectedDate );
                // 시작일(sDatepicker) datepicker가 닫힐때
                // 종료일(eDatepicker)의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
            }                
        });
        $('#sDatepicker').datepicker('setDate', thisYear+'-'+thisMonth+'-01');    //시작일 초기값 셋팅
        
        //종료일의 초기값을 내일로 설정
        $('#eDatepicker').datepicker({
            onClose: function( selectedDate ) {
                $("#sDatepicker").datepicker( "option""maxDate", selectedDate );
                // 종료일(eDatepicker) datepicker가 닫힐때
                // 시작일(eDatepicker)의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정 
            }
        });
        $('#eDatepicker').datepicker('setDate''today');                        //끝일 초기값 셋팅
    });
 
 
 
 

특히 닫힐때에 한계값과 초기값을 동시에 셋팅하는게 하나의 옵션에 다 때려박으면 안되더라 ...

저렇게 두개로 따로주어야 정상작동 한다는것 기억하자

 

출처 : https://its-easy.tistory.com/12

 

[Jquery UI] Datepicker 간단 사용법

Jquery UI 공식사이트인 https://jqueryui.com 에서 모든 Example과 API문서를 보고, 실무에서 많이 쓰일 것 같은 내용만 손쉽게 사용 할 수 있도록 정리해보았습니다. 현재 최신 버전인 1.12.1 버전 기준입니다...

its-easy.tistory.com

출처 : https://codeday.me/ko/qa/20190317/84711.html

 

jQuery에서 .datepicker ( ‘setdate’) 문제 - 코드 로그

.datepicker ()를 사용하여 선택한 특정 날짜 범위를 기반으로 일부 데이터를 가져 오는 쿼리를 실행하는 함수가 있습니다. 응답 데이터에있는 datepicker를 쿼리가 실행되기 전에 선택한 날짜 범위로 다시 설정하려고합니다. queryDate = '2009-11-01'; $('#datePicker').datepicker('setDate', queryDate); datepicker를 오늘 날짜로 설정 한 흥미로운 결과가 있습니다. 나는 단지 오류가

codeday.me