반응형
자바스크립트, input type="date" 달력 값 변경하기
글. 수알치 오상문
다음 예제는 세 개의 date 입력란이 있습니다.
(1) 하나는 기본 값을 정하지 않은 예
(2) 특정 날짜로 초기 값(2022-01-01)을 가진 달력을 2022-07-07로 변경하는 예
(3) 오늘 날짜로 변경한 예
[화면] 웹 브라우저 실행 화면
[화면] 콘솔창 출력 값
<--- 널 문자열 출력
2022-01-01
2022-07-07
오늘: 2022-06-18
[소스 코드] HTML 파일, 자바스크립트 예제
<html>
<head>
</head>
<body>
<div id="cal1">
<label for="myDate1">기본 달력 예</label><br>
<input type="date" id="myDate1" name="myDate" min="2010-01-01" max="2030-12-31" step="7" id="myDate">
</div><br>
<div id="cal2">
<label for="myDate2">2022-01-01 달력을 2022-07-07로 변경한 예</label><br>
<input type="date" id="myDate2" name="myDate" value="2022-01-01" min="2010-01-01" max="2030-12-31" step="7" id="myDate">
</div><br>
<div id="cal3">
<label for="myDate3">오늘 날짜로 변경한 예</label><br>
<input type="date" id="myDate3" name="myDate" value="2022-01-01" min="2010-01-01" max="2030-12-31" step="7" id="myDate">
</div>
<script>
const now = new Date();
// yyyy-mm-dd 포맷 날짜 생성
function getYmd10() {
var d = new Date();
return d.getFullYear() + "-" + ((d.getMonth()+1)>9 ? (d.getMonth()+1).toString() : "0"+(d.getMonth()+1)) + "-" + (d.getDate()>9 ? d.getDate().toString() : "0"+d.getDate().toString());
}
var myElement = document.getElementById("myDate1");
console.log(myElement.value); // ""
var myElement = document.getElementById("myDate2");
console.log(myElement.value); // "2022-01-01"
myElement.value = "2022-07-07";
console.log(myElement.value); // "2022-07-07"
var myElement = document.getElementById("myDate3");
myElement.value = getYmd10();
console.log("오늘: " + getYmd10()); // 오늘 날짜 출력됨
</script>
</body>
</html>
반응형
'JavaScript, jQuery' 카테고리의 다른 글
| 자바스크립트 테트리스 만들기 (0) | 2022.11.30 |
|---|---|
| JQuery 기본 문법 (0) | 2022.07.10 |
| HTML 포맷에 맞게 객체 값을 넣어서 출력하는 예제 (0) | 2022.06.10 |
| Event Bubbling vs. Capturing (0) | 2022.06.09 |
| DOMContentLoaded vs. Load 이벤트 (0) | 2022.06.09 |