[HTML] input type=date (yyyyyy-mm-dd) 해결 방법 | 달력 표시하기

<input type ="date">

 

캘린더에서 날짜를 선택하는 방식, 직접 날짜를 입력하는 방식으로 내가 검색 조건을 받을 때 제이쿼리대신 간편하게 쓰는 태그 중 하나다.

 

제이쿼리 캘린더를 사용하면 커스텀이 용이하지만 아직까지 커스텀을 휘황찬란하게 할 일이 없어서 

 

주로 input 태그의 date 타입을 자주 사용한다.

 

손쉽게 캘린더를 만들 수 있지만 몇가지 단점이 있는데 그 단점을 보완?하는 방법이다.

---

단점1. yyyyyy-dd-mm

캘린더에서 날짜를 선택한 경우 yyyy-mm-dd 형태로 잘 입력이 된다.

 

그러나 input창에 직접 연도월일을 입력하게되면 yyyyyy-mm-dd의 형태로 연도가 6자리까지 입력을 받을 수 있게 되는데

이게 사용성 측면에서는 별로인거다.

 

기본 설정이 6자리이기 때문에 발생하는 현상이라 별도로 max값을 지정해서 연도를 4자리까지만 받아올 수 있다.

<input type ="date" max="9999-12-31">

 

이렇게 태그 안에 max값을 지정해주면 4자리까지만 받게된다.

+

뭐 저런 태그가 하나면 그냥 삽입하겠지만 페이지가 두개 이상된다면 또 언제 하나하나 max값을 지정해주고 있겠나...

공용 js파일안에 input태그의 타입이 date일 때 함수를 하나 만들어서 모두 일괄적용해주자!

 

  document.querySelectorAll('input[type="date"]').forEach(function (input) {
    input.setAttribute('max', '9999-12-31');
  });

 

---

단점2.  달력 아이콘만 눌러야 달력이 보인다.

6자리보다 더 최악의 단점.

저 오른쪽 구석의 작은 달력을 눌러야만? 달력이 열린다.

 

시력 안좋은 사람은 쓸 수나 있겠소?

 

아까  max설정한 함수에 스리슬쩍 아래 리스너도 하나 추가해주자.

    input.addEventListener('focus', function () {
      this.showPicker();
    });

showPicker() 함수는 HTML <input type="date"> 요소에서 날짜 선택기를 강제로 열어주는 함수이다.
이 함수를 호출하면 해당 input 필드가 포커스를 받는 즉시, 사용자 인터페이스에 날짜 선택 창이 열리도록 해놨다.

다만, 이 함수는 모든 브라우저에서 표준으로 지원되는 것은 아니라는 또 다른 단점이 있는데(?)
일부 최신 브라우저에서는 input 요소에 type="date"가 적용되어 있으면 사용할 수 있지만, 
그렇지 않은 경우에는 직접 구현하거나 폴리필이 필요할 수 있다.