[JavaScript] 날짜 제한 설정 하기 (set max date)

JavaScript Logo

 

Contents

---

 

1. 배경

오늘은 2022년 5월 11일입니다. 아래처럼 특정 날짜(아래에선 오늘) 이후로는 선택할 수 없도록 하는 방법을 알아보겠습니다. 왼쪽은 input 태그의 "date" type이고, 오른쪽은 input 태그의 "datetime-local" type입니다. 오른쪽에선 시간까지 설정할 수 있습니다.

input tag type date and datetime-local

 

2. 기초예시

1) input type="date" 오늘 이후로 선택 안되도록

 

See the Pen date_max_date by netsus (@netsus) on CodePen.

 

* JavaScript 코드 설명

var now_utc = Date.now() // 지금 날짜를 밀리초로
// getTimezoneOffset()은 현재 시간과의 차이를 분 단위로 반환
var timeOff = new Date().getTimezoneOffset()*60000; // 분단위를 밀리초로 변환
// new Date(now_utc-timeOff).toISOString()은 '2022-05-11T18:09:38.134Z'를 반환
var today = new Date(now_utc-timeOff).toISOString().split("T")[0];
document.getElementById("Date").setAttribute("max", today);

Date.now()는 현재 날짜를 밀리 초로 반환해줍니다. 지금을 기준으로 Date.now() 반환 값은1652259978452 입니다. toISOString은 UTC기준으로 시간을 문자열로 바꿔서 반환하기 때문에, getTimezoneOffset()을 이용해 UTC기준 시간과 여기 시간의 차이를 빼야 합니다. getTimezoneOffset()은 UTC 시간과 차이를 분단위로 반환하기 때문에 여기에 60,000을 곱해서 밀리초 단위로 바꿔줍니다. now_utc - timeOff를 통해 이곳 기준 시간을 구한 뒤, toISOString을 통해 시간을 문자열로 바꿔 줍니다. toISOString()은 지금을 기준으로 '2022-05-11T18:09:38.134Z'를 반환합니다. 여기서 "T"를 기준으로 split 하고 그 앞부분은 '2022-05-11'이 되며, 이를 today에 저장합니다. 그리고 input 태그에서 max값으로 today값을 주게 되면, 22년 5월 11일 이후로는 선택되지 않도록 할 수 있습니다.

 

2) input type="datetime-local" 오늘 이후로 선택 안되도록

See the Pen Untitled by netsus (@netsus) on CodePen.

 

* JavaScript 코드 설명

var now_utc = Date.now() // 지금 날짜를 밀리초로
// getTimezoneOffset()은 현재 시간과의 차이를 분 단위로 반환
var timeOff = new Date().getTimezoneOffset()*60000; // 분단위를 밀리초로 변환
// new Date(today-timeOff).toISOString()은 '2022-05-11T18:09:38.134Z'를 반환
var today = new Date(now_utc-timeOff).toISOString().substring(0, 16);

document.getElementById("DateLocal").setAttribute("max", today);

위의 1) 코드와 다른 점은 toISOString()에 대해 substring(0,16)을 했다는 점입니다. 즉, '2022-05-11T18:09:38.134Z' 에 대해, '2022-05-11T18:09' 이 부분만 잘라서 반환합니다. 왜냐하면, "datetime-local" 타입 요소는 시간까지 설정해줘야 하기 때문입니다. 

 

3. 결론

날짜 선택하는 input 태그에 대해, Js를 이용해 오늘 날짜 이후로 선택되지 않도록 하는 기능을 구현해보았습니다. 

 

읽어주셔서 감사합니다.

오늘도 유익하셨길 바랍니다. 

다음에 더 유익하고 재미있는 포스팅으로 찾아오겠습니다.

 

Reference)
1. JavaScript Logo : 
https://commons.wikimedia.org/wiki/File:Unofficial_JavaScript_logo_2.svg
2. https://from2020.tistory.com/12
3. https://stackoverflow.com/questions/32378590/set-date-input-fields-max-date-to-today
4. https://stackoverflow.com/questions/25159330/how-to-convert-an-iso-date-to-the-date-format-yyyy-mm-dd