客戶需求如下

1. 不要用datepicker點，說是手機太小不好點＋老人不會點
2. 資料庫格式為西元年，但一堆人填民國年

CodePen程式碼：https://codepen.io/shih-min-chou/pen/RwZEjGg

HTML Input

<input type="text" class="form-control" id="inputDate" placeholder="西元年月日 如:19901201"
                  onkeyup = "value=value.replace(/[^0-9\-]/g,'')" inputmode="numeric" minlength="8" maxlength="8"
                  onchange="checkDate(this)" pattern="(?:19|20)(?:(?:[13579][26]|[02468][048])-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))|(?:[0-9]{2}-(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:29|30))|(?:(?:0[13578]|1[02])-31)))"
                  title="西元年月日 如:19901201" required>

中間pattern部分參考https://www.html5pattern.com/Dates
value.replace 讓Input僅能輸入數字及'-'符號
inputmode 讓手機用戶的鍵盤僅能輸入數字
讓送出時僅能輸入19xx年或20xx年

<script>
      function checkDate(o){
        var dateVal = o.value
        var dateYear = dateVal.substr(0, 4);
        var dateMonth = dateVal.substr(4, 2);
        var dateDay = dateVal.substr(6, 2);
        
        function clearInput(){
          o.focus();
          o.value = '';
        }
        
        if (dateVal !== '' && dateVal.length == 8){
          dateVal = dateYear + "-" + dateMonth + "-" + dateDay;
          o.value = dateVal;
          var age = getAge(dateVal);
          if ( age < 20 ){
            alert('年齡需滿20歲以上');
            clearInput();
          }else if ( age > 75 ){
            alert('年齡需75歲以下');
            clearInput();
          }
        }else {
          alert("請輸入正確格式 西元年月日 如:19901201");
          clearInput();
        }
      }
      
      //抓取年齡
      function getAge(dateString) {
        var today = new Date();
        var birthDate = new Date(dateString);
        var age = today.getFullYear() - birthDate.getFullYear();
        var m = today.getMonth() - birthDate.getMonth();
        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
            age--;
        }
        return age;
      }
    </script>

大概紀錄一下，因為網路上幾乎都只找的到使用Datepicker的方式