[javascript] Date 객체
by mini_min[javascript] Date 객체
✔️ Date 객체
: 날짜와 시간을 다루는데 사용되는 객체다! new 연산자를 사용하여 객체 타입을 만든다.
📓 생성자 및 정적 메소드
Date() : 현지 시간으로 생성 순간의 날짜와 시간을 나타내는 Date 객체를 생성한다.
Date.now() : 1970년 1월 1일 0시 0분 0초 부터 지난 시간을 밀리초 단위의 숫자 값으로 반환한다.
Date.parse(dateString) : 날짜의 문자열 표현을 분석하여 1970년 1월 1일 0시 0분 0초 이후 밀리 초로 반환한다.
.getFullYear() : 현지 시간 기준 연도(4글자)로 반환한다.
.getMonth() : 날짜의 월을 나타내는 0에서 11 사이의 정수를 반환한다. 0은 1월 1은 2월
.getDate() : 주어진 날짜의 일에 해당하는 1이상 31이하 정수 반환
.getDay() : 0 이상 6이하 정수를 반환한다.
.getHours() : 기준 시에서 0에서 23 사이의 정수를 반환
.getMinutes() : 기준 분에서 0에서 23 사이의 정수를 반환
.getSeconds() : 기준 초에서 0에서 23 사이의 정수를 반환
.getTime() : 경과 시간을 나타내는 숫자를 밀리 초로 반환한다.
var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1; // getMonth() : 0~11
var d = now.getDate();
var w = now.getDay(); // 0(일) ~ 6(토)
var hr = now.getHours();
var mn = now.getMinutes();
var sc = now.getSeconds();
var ms = now.getTime(); // 1970-01-01 00:00:00 부터 경과시간. 단위 : ms
var s = y + '-' + m + '-' + d + ' ' + hr+':'+mn+':'+sc;
console.log(s, w);
console.log(ms);
✔️ Date 객체로 타이머 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
.box {
width: 250px;
margin: 30px auto;
text-align: center;
}
</style>
<script type="text/javascript">
function showClock() {
let now = new Date();
if(m < 10) m = "0" + m;
if(d < 10) d = "0" + d;
let hr = now.getHours();
let mn = now.getMinutes();
let sc = now.getSeconds();
if(hr < 10) hr = "0" + hr;
if(mn < 10) mn = "0" + mn;
if(sc < 10) sc = "0" + sc;
let s = y + '-' + m + '-' + d + ' ' + hr + ':' + mn + ':' + sc;
document.querySelector('#nowDate').value = s;
setTimeout("showClock()", 1000);
}
// showClock(); // <input type='text' ... 가 아래 있으므로 결과 나오지 않음
/* window.onload = function() {
showClock();
}; */
window.onload = () => showClock();
</script>
</head>
<body>
<div class="box">
<input type="text" id="nowDate" readonly="readonly">
</div>
</body>
</html>
.setDate(dayValue) : 현재 설정된 날짜에 지정된 월의 일자를 설정한다.
<script type="text/javascript">
var y, m, d, s;
//2022-09-31일로 Date 객체 생성
var date;
//2022-09-31 로 date 객체 생성 : 2022-10-01로 날짜가 설정됨
date = new Date(2022,9-1,31);
y = date.getFullYear();
m = date.getMonth() + 1; // getMonth() : 0~11
d = date.getDate();
s = y+"-"+m+"-"+d;
console.log(s);
date.setDate(50); // 일자를 50일로 설정.
y = date.getFullYear();
m = date.getMonth() + 1; // getMonth() : 0~11
d = date.getDate();
s = y+"-"+m+"-"+d;
console.log(s); // 2022-11-19💡 date.setDate(50); 일자에 50일을 넣어서 설정한다. 2022-09-19 에서 50일자를 설정한다.
date = new Date(2022,9-1,31); : 9월 31일로 객체를 생성 ! => 10월 1일 날짜를 설정한다.
✔️ 마지막 일자 뽑기
//2022년 10월의 마지막 일자
y = 2022;
m = 10;
var lastDay = (new Date(y,m,0)).getDate();
console.log(lastDay);💡 2022년 10월의 마지막 일자를 구하고 싶으면, (y, m, 0)
10월 0일로 작성해서 마지막 일자가 나온거다.
✔️ 전 달의 마지막 일자
y = 2022;
m = 10;
var lastDay = (new Date(y,m-1,0)).getDate();
console.log(lastDay);💡 전 달이라서, m-1 하면 전 달이 된다.
✔️ 날짜 유효성 검사
//날짜 유효성 검사
function isValidDate(data) {
if(data.length !== 8 && data.length !==10 ) return false;
//replace 할 때는 g를 붙여야 안에 있는 모든 내용을 조사해서 변경한다.
let p = /(\.)|(\-)|(\/)/g;
data = data.replace(p, '');
if(data.length !== 8) return false;
p = /^[12][0-9]{3}[0-9]{2}[0-9]{2}$/;
// p = /^[12][0-9]{7}$/;
if(! p.test(data)) return false;
let y = parseInt(data.substring(0,4));
let m = parseInt(data.substring(4,6));
//let m = parseInt(data.substring(4,2)); //4부터 시작해서 2개 반환
let d = parseInt(data.substring(6)); // 6자리부터 끝까지
if(m <1 || m > 12) {return false;}
let lastDay = (new Date(y,m,0)).getDate(); // m월의 마지막 일자
if(d < 1 || d > lastDay) {return false;}
return true;
}💡 p = /^[12][0-9]{7}$/;
💡 replace 할 때는 g를 붙여야 안에 있는 모든 내용을 조사해서 변경한다.
💡 substring 으로 문자열을 연도, 월, 일로 자른다.
✔️ 두 날짜 사이의 간격(일)
// 두 날짜 사이의 간격(일)
function toDiffDays(startDate, endDate) {
let p = /(\.)|(\-)|(\/)/g;
startDate = startDate.replace(p, '');
endDate = endDate.replace(p, '');
if(! isValidDate(startDate)){
throw "날짜 형식이 올바르지 않습니다.";
}
if(! isValidDate(endDate)){
throw "날짜 형식이 올바르지 않습니다.";
}
let sy = parseInt(startDate.substring(0,4));
let sm = parseInt(startDate.substring(4,6));
let sd = parseInt(startDate.substring(6));
let ey = parseInt(endDate.substring(0,4));
let em = parseInt(endDate.substring(4,6));
let ed = parseInt(endDate.substring(6));
let sdate = new Date(sy,sm-1,sd);
let edate = new Date(ey,em-1,ed);
let st = sdate.getTime();
let et = edate.getTime();
let dif = et - st;
let day = Math.floor(dif/(24*60*60*1000));
return day;
//return day + 1 ; // 네이버 방식이다.
}💡 startDate 와 endDate 에서 필요한 정보를 얻어낸다.
function result() {
var startDate = document.querySelector("#startDate").value;
var endDate = document.querySelector("#endDate").value;
try {
let n = toDiffDays(startDate, endDate);
alert("차이(일): " + n);
} catch (e) {
document.querySelector("#startDate").focus();
return;
}
}
'JavaScript' 카테고리의 다른 글
| [javascript] Array 객체 - 배열 (0) | 2022.09.20 |
|---|---|
| [javascript] Number 객체 / Math 객체 (0) | 2022.09.20 |
| [javascript] 문자 리터널 / String 객체 (0) | 2022.09.20 |
| [javascript] 화살표 함수 표현 (0) | 2022.09.20 |
| [javascript] 클로저(Closures) (0) | 2022.09.20 |
블로그의 정보
개발자 미니민의 개발로그
mini_min