Notice
Recent Posts
Recent Comments
Tags more
«   2024/05   »
일 월 화 수 목 금 토
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
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[jquery] 달력 datepicker, 매달 현재일부터 마지막 날까지만 선택가능하도록 (기타 다양한 조건 有) 본문

jquery

[jquery] 달력 datepicker, 매달 현재일부터 마지막 날까지만 선택가능하도록 (기타 다양한 조건 有)

http://portfolio.wonpaper.net 2023. 3. 10. 14:13

필자의 jQuery 달력 기본 소스는 아래와 같다.

다양한 경우에 jquery, javascript 상으로 사용자정의 선택이 가능하다.

 

 

달력 datepicker , 한글화 및 특정일 선택

먼저 jquery ui 사이트에서 관련 api 를 받아와야 한다.https://jqueryui.com/ 이글을 올리는 시점의 안정화 버전을 올려놨다. $(function() { $("#datepicker").datepicker({ showMonthAfterYear:true, monthNamesShort: ['1월','2월',

wonpaper.tistory.com

[문제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
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
 
<script>
    $(function () {
        var date = new Date();
        var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
        var restDate = lastDay.getDate() - date.getDate();
        //alert(lastDay.getDate());
 
        $("#start_date").datepicker({
            showMonthAfterYear: true,
            monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
            dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
            showAnimation: 'slider',
            dateFormat: 'yy-mm-dd',
            showOtherMonths: true,
            selectOtherMonths: true,
            changeMonth: true,
            changeYear: true,
            maxDate: restDate,
            minDate: 0
        });
    });
</script>
 cs

 

[문제2]

이번에는 오늘날짜가 2023-05-13 일때 시작일은 오늘로 하고, 이달의 마지막날인 31일을 자동으로 종료일 시정하는 소스를 만들어 보자.

 

 

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
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
 
<script>
        $(function () {
            var date = new Date();
            var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
            var restDate = lastDay.getDate() - date.getDate();
            //alert(lastDay.getDate());
 
            $("#start_date").datepicker({
                showMonthAfterYear: true,
                monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
                dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
                showAnimation: 'slider',
                dateFormat: 'yy-mm-dd',
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                maxDate: restDate,
                minDate: 0
            });
            $("#end_date").datepicker({
                showMonthAfterYear: true,
                monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
                dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
                showAnimation: 'slider',
                dateFormat: 'yy-mm-dd',
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                maxDate: restDate,
                minDate: 0
            });
            $('#start_date').datepicker('setDate', 'today');
            $('#end_date').datepicker('setDate', restDate);
        });
</script>    
 cs

 

[문제3]

이번에는 조금 어렵게 시작일을 오늘로 하고 종료일은 오늘로부터 한달뒤인 시점으로 하는 달력을 두개 만들어 보자.

 

 

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
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
 
    <script>
        $(function () {
            var date = new Date();
            var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
            var restDate = lastDay.getDate() - date.getDate();
            //alert(lastDay.getDate());
 
            $("#start_date").datepicker({
                showMonthAfterYear: true,
                monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
                dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
                showAnimation: 'slider',
                dateFormat: 'yy-mm-dd',
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                maxDate: restDate,
                minDate: 0
            });
            $("#end_date").datepicker({
                showMonthAfterYear: true,
                monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
                dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
                showAnimation: 'slider',
                dateFormat: 'yy-mm-dd',
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                maxDate: 30,
                minDate: 0
            });
            $('#start_date').datepicker('setDate', 'today');
            $('#end_date').datepicker('setDate', '+1M');
        });
        </script>
 cs

 

 

[문제4]  오늘부터 3개월까지만 시작일은 오늘로하고, 종료일을 3개월 마지막날로 하는 두개의 달력을 만들어보자.

 

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
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
 
        <script>
        $(function () {
            var date = new Date();
            //var lastDay = new Date(date.getFullYear(), date.getMonth() + 3, 0);
            //var restDate = lastDay.getDate() - date.getDate();
            //alert(lastDay.getDate());
 
            var lastDay = new Date(date.getFullYear(), date.getMonth() + 3, 0);
            var restDate = lastDay.getDate() - date.getDate();
            var lastDay2 = new Date(date.getFullYear(), date.getMonth() + 3, 30);
 
            $("#start_date").datepicker({
                showMonthAfterYear: true,
                monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
                dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
                showAnimation: 'slider',
                dateFormat: 'yy-mm-dd',
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                maxDate: restDate,
                minDate: 0
            });
            $("#end_date").datepicker({
                showMonthAfterYear: true,
                monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
                dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
                showAnimation: 'slider',
                dateFormat: 'yy-mm-dd',
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                maxDate: 90,
                minDate: 0
            });
            $('#start_date').datepicker('setDate', 'today');
            $('#end_date').datepicker('setDate', lastDay2);
        });
        </script>
 cs

 

[문제5] 다음달 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
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
 
        <script>
        $(function () {
            var date = new Date();
            var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 1);
            var lastDay2 = new Date(date.getFullYear(), date.getMonth() + 2, 0);
            //var restDate = lastDay.getDate() - date.getDate();
            //alert(lastDay.getDate() + " / " + lastDay2.getDate());
 
            $("#start_date").datepicker({
                showMonthAfterYear: true,
                monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
                dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
                showAnimation: 'slider',
                dateFormat: 'yy-mm-dd',
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                maxDate: lastDay2,
                minDate: lastDay
            });
            $("#end_date").datepicker({
                showMonthAfterYear: true,
                monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
                dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
                showAnimation: 'slider',
                dateFormat: 'yy-mm-dd',
                showOtherMonths: true,
                selectOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                maxDate: lastDay2,
                minDate: lastDay
            });
                $('#start_date').datepicker('setDate', lastDay);
                $('#end_date').datepicker('setDate', lastDay2);
        });
        </script>        
 cs

 

 

참고 : https://a-half-human-half-developer.tistory.com/77

'jquery' 카테고리의 다른 글

[jquery] 더보기 기능 구현하기 (more)  (0) 2023.12.08
[JQuery] 특정노드의 하위요소에서 모든 a태그의 속성값을 새창(_blank) 기능을 추가하기  (0) 2023.06.13
[jQuery] 유용한 실무팁1 - jquery Modal 형태로 백엔드처리하기  (0) 2023.01.03
[jQuery] jquery Modal 모달 data-dismiss="modal" 창닫기 안될때  (0) 2023.01.03
[javascript,jquery] select박스 여러개 동적으로 만들기 (가변적으로 생성)  (0) 2022.12.09
'jquery' Related Articles more
Comments