모바일(iphone, ipad) input type = date min, max 적용 안됨

https://stackoverflow.com/questions/26929297/html-5-input-type-date-control-max-date-is-not-working-in-iphone-ipad

Html 5 [input type=Date] control, MAX date is not working in iPhone/Ipad

input type=Date로 최대 일자와 최소 일자를 적용했다.

웹에서는 잘 적용이 되었지만 모바일로 하면 적용이 안되는 문제를 발견했다.

결론적으로 iphone과 ipad에서 지원이 안되는 문제가 있었고, Pickaday 라이브러리를 사용해서 해결했다.

 

html

<!-- Pikaday Library -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

<input type="text" id="datepicker" style="float:right; text-align:center; width:120px">

javascript

var today = new Date();
var lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
var picker = new Pikaday({
    field: document.getElementById('datepicker'),
    onSelect: date => {
      const year = date.getFullYear()
           ,month = date.getMonth() + 1
           ,day = date.getDate()
           ,formattedDate = [
              year
             ,month < 10 ? '0' + month : month
             ,day < 10 ? '0' + day : day
            ].join('-')
      document.getElementById('datepicker').value = formattedDate
    },
    minDate: today,
    maxDate: lastDay
});

위의 코드에서 onSelect: date 는 date format을 yyyy-mm-dd로 표현하기 위함이다.