[jQuery/jQuery UI] Datepicker > 시작일과 종료일 입력시 선택 가능

SeoHW 2018. 12. 5. 10:12

[jQuery/jQuery UI] Datepicker > 시작일과 종료일 입력시 선택 가능 범위 제한하기

조건

:: 시작일은 종료일 이후 날짜를 선택 할 수 없으며, 종료일은 시작일 이전의 날짜를 선택 할수 없다.

[코드]

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQuery UI</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
        <style>
            /*datepicker에서 사용한 이미지 버튼 style적용*/
            img.ui-datepicker-trigger {
                margin-left:5px; vertical-align:middle; cursor:pointer;
}
        </style>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ko.js"></script>
        <script>
            $(function() {


                //오늘 날짜를 출력
                $("#today").text(new Date().toLocaleDateString());

                //datepicker 한국어로 사용하기 위한 언어설정
                $.datepicker.setDefaults($.datepicker.regional['ko']);

                // 시작일(fromDate)은 종료일(toDate) 이후 날짜 선택 불가
                // 종료일(toDate)은 시작일(fromDate) 이전 날짜 선택 불가

                //시작일.
                $('#fromDate').datepicker({
                    showOn: "both",   // 달력을 표시할 타이밍 (both: focus or button)
                    buttonImage: "images/calendar.gif", // 버튼 이미지
                    buttonImageOnly : true,   // 버튼 이미지만 표시할지 여부
                    buttonText: "날짜선택",   // 버튼의 대체 텍스트
                    dateFormat: "yy-mm-dd",   // 날짜의 형식
                    changeMonth: true, // 월을 이동하기 위한 선택상자 표시여부
                    //minDate: 0,   // 선택할수있는 최소날짜, ( 0 : 오늘 이전 날짜 선택 불가)
                    onClose: function( selectedDate ) {
                        // 시작일(fromDate) datepicker가 닫힐때
                        // 종료일(toDate)의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
                        $("#toDate").datepicker( "option", "minDate", selectedDate );
                    }
                });

                //종료일
                $('#toDate').datepicker({
                    showOn: "both",
                    buttonImage: "images/calendar.gif",
                    buttonImageOnly : true,
                    buttonText: "날짜선택",
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    //minDate: 0, // 오늘 이전 날짜 선택 불가
                    onClose: function( selectedDate ) {
                        // 종료일(toDate) datepicker가 닫힐때
                        // 시작일(fromDate)의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정
                        $("#fromDate").datepicker( "option", "maxDate", selectedDate );
                    }
                });
            });
        </script>
    </head>
    <body>
        오늘 날짜 : <span id="today"></span>
        <form>
          <label for="fromDate">시작일</label>
          <input type="text" name="fromDate" id="fromDate">
          ~
          <label for="toDate">종료일</label>
          <input type="text" name="toDate" id="toDate">
        </form>
    </body>
</html>

[출처] [jQuery/jQuery UI] Datepicker > 시작일과 종료일 입력시 선택 가능 범위 제한하기|작성자 자바킹