DEV Community

sunj
sunj

Posted on

Html, datetime-local

<label for="datetime">날짜와 시간을 선택하세요:
  <input type="datetime-local"
         id='currentMonth'
  >
</label>
Enter fullscreen mode Exit fullscreen mode

현재 날짜&시간을 max로 잡기 위해서 js를 같이 사용해야 함

var d = new Date();
document.getElementById("currentMonth").value = new Date(
  d.getTime() - d.getTimezoneOffset() * 60000
)
  .toISOString()
  .slice(0, -1);
Enter fullscreen mode Exit fullscreen mode
<body>
    <div class="m100">
        <h1>input datetime-local value, min, max</h1>
        <input type="datetime-local" id="dateTimeLocal" onchange="setMaxValue()">
    </div>

    <script>
        let dateElement = document.getElementById('dateTimeLocal');
        let date = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, -5);
        dateElement.value = date;
        dateElement.setAttribute("max", date);

        function setMaxValue() {
            if(dateElement.value > date) {
                alert('현재 시간보다 이후의 날짜는 설정할 수 없습니다.');
                dateElement.value = date;
            }
        }
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

참조: https://sorto.me/docs/Web/HTML/Element/input/datetime-local
https://velog.io/@leeu2u/HTML22input-%ED%98%84%EC%9E%AC-%EB%82%A0%EC%A7%9C-%EC%8B%9C%EA%B0%84-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

https://wildeveloperetrain.tistory.com/15

Top comments (0)