반응형
웹 사이트를 제작할 때 게시판에서 가장 중요한 조건은 날짜라고 볼수 있습니다.
오늘은 간단히 버튼을 통해 제공할 수 있는 스크립트 날짜 함수를 정리해보겠습니다.
정리 함수는 현재일/해당월/전달/다음달 입니다.
[JavaScript] 날짜 계산 함수 영상 소개 (현재일/해당월/전달/다음달)
HTML
|
1
2
3
4
|
<input type="button" class="btn btn-black btn-h25" onclick="today()" value="today"/>
<input type="button" class="btn btn-black btn-h25" onclick="previous_monthday()" value="<<"/>
<input type="button" class="btn btn-black btn-h25" onclick="monthday()" value="월간"/>
<input type="button" class="btn btn-black btn-h25" onclick="next_monthday()" value=">>"/>
|
cs |
HTML에서는
input type에 버튼을 선언하고 onclick 속성에 함수를 집어 넣으면 됩니다.
JavaScript
현재일
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function today(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (("" + month).length == 1) { month = "0" + month; }
if (("" + day).length == 1) { day = "0" + day; }
$('#searchBgnDe').val("" + year +"-"+ month+ "-" + day);
$('#searchEndDe').val("" + year +"-"+ month+ "-" + day);
}
|
cs |
new Date를 통해 현재 데이터 값을 가져오고
년도와 월, 그리고 일자를 가져옵니다.
그리고 월과 일의 길이가 한자리수면 0을 뭍여주고
날짜 컬럼에 넣어주면 됩니다.
현재달
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function monthday(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var lastDay = date.getDate() - 1;
if (("" + month).length == 1) { month = "0" + month; }
if (("" + lastDay).length==1) { lastDay ='0' + lastDay; }
$('#searchBgnDe').val("" + year + "-" + month + "-" + '01');
$('#searchEndDe').val("" + year + "-" + month + "-" + lastDay);
}
|
cs |
new Date를 통해 현재 데이터 값을 가져오고
년도와 월, 그리고 date.getDate() - 1를 통해서 마지막일자를 가져온 후에
시작일자 컬럼에는 01을, 마지막 일자 컬럼에는 lastDay 값을 넣어줍니다.
반응형
이전달
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function previous_monthday(){
var startMonth = $('#searchBgnDe').val();
var month = Number(startMonth.substring(5,7));
var year = Number(startMonth.substring(0,4));
month--;
if(month<1){
year = year-1;
month = 12;
}
var lastDay = (new Date(year,month,0)).getDate();
if (("" + month).length == 1) { month = "0" + month; }
$('#searchBgnDe').val("" + year +"-"+ month+ "-" + '01');
$('#searchEndDe').val("" + year +"-"+ month+ "-" + lastDay);
}
|
cs |
이전달은 시작일자 컬럼의 값을 가져오면서 시작합니다.
시작일자의 월과 년도를 가져온 다음 월을 하나 빼줍니다.
월이 1보다 작으면 년도와 월을 재 계산해준 다음
각각에 일자 값에 넣어주면 됩니다.
다음달
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function next_monthday(){
var startMonth = $('#searchEndDe').val();
var month = Number(startMonth.substring(5,7));
var year = Number(startMonth.substring(0,4));
month++;
if(month>12){
year = year+1;
month = 1;
}
var lastDay = (new Date(year,month,0)).getDate();
if (("" + month).length == 1) { month = "0" + month; }
$('#searchBgnDe').val("" + year +"-"+ month+ "-" + '01');
$('#searchEndDe').val("" + year +"-"+ month+ "-" + lastDay);
}
|
cs |
다음달 값은 마지막 일자 컬럼의 값으로부터 시작합니다.
년도와 월을 구해주고 월을 하나 증가시켜줍니다.
월이 12보다 크면 년도와 월을 재 계산한 후 각각의 컬럼에 넣어주기만 하면 됩니다.
전체코드
|
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
|
function today(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
if (("" + month).length == 1) { month = "0" + month; }
if (("" + day).length == 1) { day = "0" + day; }
$('#searchBgnDe').val("" + year +"-"+ month+ "-" + day);
$('#searchEndDe').val("" + year +"-"+ month+ "-" + day);
}
function monthday(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var lastDay = date.getDate() - 1;
if (("" + month).length == 1) { month = "0" + month; }
if (("" + lastDay).length==1) { lastDay ='0' + lastDay; }
$('#searchBgnDe').val("" + year + "-" + month + "-" + '01');
$('#searchEndDe').val("" + year + "-" + month + "-" + lastDay);
}
function previous_monthday(){
var startMonth = $('#searchBgnDe').val();
var month = Number(startMonth.substring(5,7));
var year = Number(startMonth.substring(0,4));
month--;
if(month<1){
year = year-1;
month = 12;
}
var lastDay = (new Date(year,month,0)).getDate();
if (("" + month).length == 1) { month = "0" + month; }
$('#searchBgnDe').val("" + year +"-"+ month+ "-" + '01');
$('#searchEndDe').val("" + year +"-"+ month+ "-" + lastDay);
}
function next_monthday(){
var startMonth = $('#searchEndDe').val();
var month = Number(startMonth.substring(5,7));
var year = Number(startMonth.substring(0,4));
month++;
if(month>12){
year = year+1;
month = 1;
}
var lastDay = (new Date(year,month,0)).getDate();
if (("" + month).length == 1) { month = "0" + month; }
$('#searchBgnDe').val("" + year +"-"+ month+ "-" + '01');
$('#searchEndDe').val("" + year +"-"+ month+ "-" + lastDay);
}
|
cs |
반응형
'JAVASCRIPT & JQUERY' 카테고리의 다른 글
| [JavsScript] Performance 객체를 이용한 성능 측정 방법 (0) | 2024.01.30 |
|---|---|
| [JavaScript] CheckBox 전체 선택 및 해제 방법 (1) | 2024.01.04 |
| [JavaScript] 실시간 타이머 구현 방법 (1) | 2024.01.04 |
| [Javascript&JQuery] 비밀번호 Caps Lock 설정 방법 (영상) (1) | 2023.01.01 |
| [JavaScript/JQuery] 동적변수 사용 방법 (0) | 2022.12.23 |
댓글