반응형
날짜(date)
HTML
<body>
<h1>오늘 날짜 출력하기</h1>
<span id="today"></span><br/>
<button onclick="testDate01()">오늘날짜</button>
<button onclick="testDate02()">오늘날짜(표현방식설정)</button>
<hr>
<h1>특정날짜 출력하기</h1>
<span id="specific"></span>
<button onclick="testDate03()">특정날짜</button>
<hr>
<h1>경과날짜구하기</h1>
<label>현재날짜:</label><input type="text" id="dates" readonly="readonly"/><br/>
<label>경과일:</label><input type="number" id="inputDate" min="1" />일<br/>
<label>경과후 날짜:</label><input type="text" id="result" readonly="readonly"/><br/>
<button onclick="testDate04()">경과날짜조회</button>
<hr>
<h1>D-Day기능 만들기</h1>
<label>현재날짜</label><input type="text" id="dates2" readonly="readonly"/><br/>
<label>수료일:</label>
<input type="date" id="d_day" /><br/>
<label>남은 일수:</label><input type="text" id="period" readonly="readonly"/>
<button type="button" onclick="testDate05()" >확인</button>
</body>
JavaScript
오늘날짜
function testDate01(){
//날짜객체 생성
var date=new Date();
var spandate=document.getElementById("today");
//
spandate.innerHTML=date.toLocaleString();
}
//다른 형태로 출력
function testDate02(){
var date=new Date();
var spandate=document.getElementById("today");
var dayOfWeek=["일","월","화","수","목","금","토"];
var year=date.getFullYear(); //2023
var month=date.getMonth()+1; //1+1
var day=date.getDate(); //27
var week=dayOfWeek[date.getDay()]; //월
spanDate.innerHTML=`${year} / ${month} / ${day} / ${week}`;
//2023 / 2 / 27 / 월
}특정날짜
function testDate03(){
var date= new Date("2023-03-01");
document.getElementById("specific").innerHTML=date.toLocaleDateString();
var date=new Date(2023,3,1);
document.getElementById("specific").innerHTML=date.toLocaleDateString();
}
//
2023. 3. 1.
2023. 4. 1.
기타 참고
- toLocaleString()
// 한국어는 년-월-일 순서와 AM/PM이 있는 12시간을 사용합니다
console.log(date.toLocaleString("ko-KR"));
// → "2023. 2. 27. 오후 5:35:22
// 미국 영어는 달-일-년 순서와 AM/PM이 있는 12시간을 사용합니다
console.log(date.toLocaleString("en-US"));
// → 2/27/2023, 5:35:58 PM- 자바스크립트 날짜 메소드
- getDate() : 날(1~31)
- getDay() : 요일(0~6)
- getFullYear() : 년도(yyyy)
- getMonth() : 월 (0~11)
- toLocaleDateString()
const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
// US English uses month-day-year order
console.log(date.toLocaleDateString("en-US"));
// "12/20/2012"
// Korean uses year-month-day order
console.log(date.toLocaleDateString("ko-KR"));
// "2012. 12. 20."반응형
'Front-end > Javascript' 카테고리의 다른 글
| (JavaScript)DOM -appendChild,insertBefore (0) | 2023.03.03 |
|---|---|
| (JavaScript)DOM탐색 속성 (0) | 2023.03.02 |
| (JavaScript)window객체-open,close (0) | 2023.02.28 |
| (JavaScript)로또 (0) | 2023.02.27 |
| (JavaScript)함수 (0) | 2023.02.23 |