input type="month" 월 제한 하기

input type="month"에서도 입력받을 수 있는 월 을 제한할 수 있습니다.

결과 화면 부터 확인하겠습니다.

4월 부터 8월까지만 선택할 수 있고, 7월이 기본적으로 선택된 달 입니다.

위 화면을 코드로 표현해 봅니다.

 <li> 
    <label for="monthType">만료일:</label>
    <input type="month" id="monthType" name="monthType" min="2023-04" max="2023-08" value="2023-07">
  </li>

id 와 name 은 입력란을 구분할 수 있는 속성 값입니다.

min : 입력 가능한 월을 의미 합니다.

max : 입력 가능한 마지막 월 을 뜻합니다.

value : 기본으로 보여지는 월 입니다.

입력시 4월달이면 그냥 4가 아니라 04 로 입력함을 주의해야 합니다. 월 앞에 꼭 0을 붙여주어야 합니다.

 

추가로 월 사이에 간격을 두어 입력받는 월을 제어 할 수도 있습니다.

월 입력 제한

    <input type="month" id="monthType" name="monthType" min="2023-04" max="2023-12" value="2023-07" step="2">

step 속성을 주면 가능 합니다. 

위 예제에서는 2개월씩 건너서 입력 받을 수 있도록 구현 되었습니다.

input type="month" 의 min 과 max 속성을 사용하면 기본적으로 입력 받을 수 있는 월을 제한할 수 있습니다.

감사합니다.