01zaiseki-year.css

.block{
  padding: 4px;
  margin: 12px 0;
  border: 1px outset #aaa;
}
.radio-school{
  display: none;
}
.label-school{
  display: inline-flex;
  padding: 2px 8px;
  margin: 8px 0;
  border: 1px solid #616161;
  background-color: #EEEEEE;
  cursor: pointer;
}
.radio-school:checked+.label-school{
  border: 1px solid #FF6F00;
  background-color: #FFECB3;
}
.school-row{
  padding: 12px 0;
}
.school-row+.school-row{
  border-top: 1px dashed #777;
}
/*  */
#bt-submit{
  padding: 4px 12px;
  margin: 8px 0;
  cursor: pointer;
}
/*  */
.table-outer{
  overflow-x: auto;
}
.table-output{
  border-collapse: collapse;
}
.table-output__thead{
  text-align: center;
  background-color: #eee;
}
.table-output__td{
  padding: 2px 8px;
  border: 1px solid #777;
  word-break: keep-all;
  white-space: nowrap;
}

02zaiseki-year.html

<div class="block">
  <div class="block__row">
    <div class="label-input">
      生年月日
    </div>
  </div>
  <div class="block__row">
    <select id="sel-year">
      <option value="2020">2020</option>
      <!-- 省略 -->
      <option value="1900">1900</option>
    </select>
    年
    <select id="sel-month">
      <option value="1">1</option>
      <!-- 省略 -->
      <option value="12">12</option>
    </select>
    月
    <select id="sel-day">
      <option value="1">1</option>
      <!-- 省略 -->
      <option value="31">31</option>
    </select>
    日
  </div>
</div>

<div class="block">
  <div class="block__row">
    <div class="school-row">
      <input type="radio" name="school-0" id="radio-school-0-1" class="radio-school radio-school-0" data-year="6" value="小学校" checked>
      <label for="radio-school-0-1" class="label-school">小学校</label>
      <br>
      留年・休学等
      <select class="sel-extend">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      浪人・休学等
      <select class="sel-blank">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div><div class="school-row">
      <input type="radio" name="school-1" id="radio-school-1-1" class="radio-school radio-school-1" value="中学校" data-year="3" checked>
      <label for="radio-school-1-1" class="label-school">中学校</label>
      <br>
      留年・休学等
      <select class="sel-extend">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      浪人・休学等
      <select class="sel-blank">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      <input type="radio" name="school-2" id="radio-school-2-1" class="radio-school radio-school-2" value="none" checked>
      <label for="radio-school-2-1" class="label-school">無し</label>
      <input type="radio" name="school-2" id="radio-school-2-2" class="radio-school radio-school-2" value="高等学校" data-year="3">
      <label for="radio-school-2-2" class="label-school">高等学校</label>
      <input type="radio" name="school-2" id="radio-school-2-3" class="radio-school radio-school-2" value="高等専門学校" data-year="5">
      <label for="radio-school-2-3" class="label-school">高等専門学校</label>
      <br>
      留年・休学等
      <select class="sel-extend">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      浪人・休学等
      <select class="sel-blank">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      <input type="radio" name="school-3" id="radio-school-3-1" class="radio-school radio-school-3" value="none" checked>
      <label for="radio-school-3-1" class="label-school">無し</label>
      <input type="radio" name="school-3" id="radio-school-3-3" class="radio-school radio-school-3" value="1年制教育機関(専門学校等)" data-year="1">
      <label for="radio-school-3-3" class="label-school">1年制教育機関(専門学校等)</label>
      <input type="radio" name="school-3" id="radio-school-3-4" class="radio-school radio-school-3" value="2年制教育機関(短大・専門学校等)" data-year="2">
      <label for="radio-school-3-4" class="label-school">2年制教育機関(短大・専門学校等)</label>
      <input type="radio" name="school-3" id="radio-school-3-5" class="radio-school radio-school-3" value="3年制教育機関(短大・専門学校等)" data-year="3">
      <label for="radio-school-3-5" class="label-school">3年制教育機関(短大・専門学校等)</label>
      <input type="radio" name="school-3" id="radio-school-3-2" class="radio-school radio-school-3" value="4年制教育(大学等)" data-year="4">
      <label for="radio-school-3-2" class="label-school">4年制教育機関(大学等)</label>
      <input type="radio" name="school-3" id="radio-school-3-6" class="radio-school radio-school-3" value="高等専門学校専攻科" data-year="2">
      <label for="radio-school-3-6" class="label-school">高等専門学校専攻科</label>
      <br>
      留年・休学等
      <select class="sel-extend">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      浪人・休学等
      <select class="sel-blank">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      <input type="radio" name="school-4" id="radio-school-4-1" class="radio-school radio-school-4" value="none" checked>
      <label for="radio-school-4-1" class="label-school">無し</label>
      <input type="radio" name="school-4" id="radio-school-4-2" class="radio-school radio-school-4" value="大学(3年次編入)" data-year="2">
      <label for="radio-school-4-2" class="label-school">大学(3年次編入)</label>
      <br>
      留年・休学等
      <select class="sel-extend">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      浪人・休学等
      <select class="sel-blank">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      <input type="radio" name="school-5" id="radio-school-5-1" class="radio-school radio-school-5" value="none" checked>
      <label for="radio-school-5-1" class="label-school">無し</label>
      <input type="radio" name="school-5" id="radio-school-5-2" class="radio-school radio-school-5" value="修士課程" data-year="2">
      <label for="radio-school-5-2" class="label-school">修士課程</label>
      <br>
      留年・休学等
      <select class="sel-extend">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      浪人・休学等
      <select class="sel-blank">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
    <div class="school-row">
      <input type="radio" name="school-6" id="radio-school-6-1" class="radio-school radio-school-6" value="none" checked>
      <label for="radio-school-6-1" class="label-school">無し</label>
      <input type="radio" name="school-6" id="radio-school-6-2" class="radio-school radio-school-6" value="博士課程" data-year="3">
      <label for="radio-school-6-2" class="label-school">博士課程</label>
      <br>
      留年・休学等
      <select class="sel-extend">
        <option value="0">0</option>
        <option value="1">1</option>
        <!-- 省略 -->
        <option value="99">99</option>
      </select>
      年
    </div>
  </div>
</div>

<button id="bt-submit">計算</button>

<div class="block table-outer">
  <table class="table-output">
    <thead class="table-output__thead">
      <tr>
        <td class="table-output__td">西暦</td>
        <td class="table-output__td">和暦</td>
        <td class="table-output__td">月</td>
        <td class="table-output__td">学歴</td>
      </tr>
    </thead>
    <tbody id="table-output__tbody"></tbody>
  </table>
</div>

03zaiseki-year.js

const sel_year = document.getElementById('sel-year');
const sel_month = document.getElementById('sel-month');
const sel_day = document.getElementById('sel-day');
const radio_school = (new Array(7)).fill(0).map((v,i)=>{
  return document.getElementsByClassName('radio-school-'+i);
});
const sels_extend = document.getElementsByClassName('sel-extend');
const sels_blank = document.getElementsByClassName('sel-blank');
const bt_submit = document.getElementById('bt-submit');
const el_table_output__tbody = document.getElementById('table-output__tbody'); 

const el_thead = document.createElement('thead');

addYear();
bt_submit.addEventListener('click',calc);

function addYear(){
  const year_last = 2020;
  const date = new Date();
  const year_now = date.getFullYear();
  for(let i=year_last+1;i<=year_now;i++){
    const option = document.createElement('option');
    option.value = i;
    option.textContent = i;
    sel_year.prepend(option);
  }
  sel_year.firstChild.selected = true;
}

function calc(){
  const array_table = [];
  const year_birth = (()=>{
    let temp = Number(sel_year.value);
    if(Number(sel_month.value)<=3){
      temp--;
    }
    if(Number(sel_month.value)==4&&Number(sel_day.value)==1){
      temp--;
    }
    return temp;
  })();
  let year = year_birth;
  let index_row = 0;
  // -小学校 +7
  year += 7;
  //row0 小学校 +6
  index_row = 0;
  for(let i=0;i<radio_school[index_row].length;i++){
    const radio = radio_school[index_row][i];
    if(radio.checked===true){
      if(radio.value!=='none'){
        array_table.push([year+'年', toWareki(year,4,1), 4, `${radio.value}　入学`]);
        year += Number(radio.dataset.year);
        year += Number(sels_extend[index_row].value);
        array_table.push([year+'年', toWareki(year,3,31), 3, `${radio.value}　卒業`]);
      }
      break;
    }
  }
  year += Number(sels_blank[index_row].value);
  //row1 中学校 +3
  index_row = 1;
  for(let i=0;i<radio_school[index_row].length;i++){
    const radio = radio_school[index_row][i];
    if(radio.checked===true){
      if(radio.value!=='none'){
        array_table.push([year+'年', toWareki(year,4,1), 4, `${radio.value}　入学`]);
        year += Number(radio.dataset.year);
        year += Number(sels_extend[index_row].value);
        array_table.push([year+'年', toWareki(year,3,31), 3, `${radio.value}　卒業`]);
      }
      break;
    }
  }
  year += Number(sels_blank[index_row].value);
  //row2 高校　高専 
  index_row = 2;
  for(let i=0;i<radio_school[index_row].length;i++){
    const radio = radio_school[index_row][i];
    if(radio.checked===true){
      if(radio.value!=='none'){
        array_table.push([year+'年', toWareki(year,4,1), 4, `${radio.value}　入学`]);
        year += Number(radio.dataset.year);
        year += Number(sels_extend[index_row].value);
        array_table.push([year+'年', toWareki(year,3,31), 3, `${radio.value}　卒業`]);
      }
      break;
    }
  }
  year += Number(sels_blank[index_row].value);
  //row3 大学等 
  index_row = 3;
  for(let i=0;i<radio_school[index_row].length;i++){
    const radio = radio_school[index_row][i];
    if(radio.checked===true){
      if(radio.value!=='none'){
        array_table.push([year+'年', toWareki(year,4,1), 4, `${radio.value}　入学`]);
        year += Number(radio.dataset.year);
        year += Number(sels_extend[index_row].value);
        array_table.push([year+'年', toWareki(year,3,31), 3, `${radio.value}　卒業`]);
      }
      break;
    }
  }
  year += Number(sels_blank[index_row].value);
  //row4 3年次編入 
  index_row = 4;
  for(let i=0;i<radio_school[index_row].length;i++){
    const radio = radio_school[index_row][i];
    if(radio.checked===true){
      if(radio.value!=='none'){
        array_table.push([year+'年', toWareki(year,4,1), 4, `${radio.value}　編入学`]);
        year += Number(radio.dataset.year);
        year += Number(sels_extend[index_row].value);
        array_table.push([year+'年', toWareki(year,3,31), 3, `${radio.value}　卒業`]);
      }
      break;
    }
  }
  year += Number(sels_blank[index_row].value);
  //row5 修士課程 
  index_row = 5;
  for(let i=0;i<radio_school[index_row].length;i++){
    const radio = radio_school[index_row][i];
    if(radio.checked===true){
      if(radio.value!=='none'){
        array_table.push([year+'年', toWareki(year,4,1), 4, `${radio.value}　入学`]);
        year += Number(radio.dataset.year);
        year += Number(sels_extend[index_row].value);
        array_table.push([year+'年', toWareki(year,3,31), 3, `${radio.value}　卒業`]);
      }
      break;
    }
  }
  year += Number(sels_blank[index_row].value);
  //row6 博士課程 
  index_row = 6;
  for(let i=0;i<radio_school[index_row].length;i++){
    const radio = radio_school[index_row][i];
    if(radio.checked===true){
      if(radio.value!=='none'){
        array_table.push([year+'年', toWareki(year,4,1), 4, `${radio.value}　入学`]);
        year += Number(radio.dataset.year);
        year += Number(sels_extend[index_row].value);
        array_table.push([year+'年', toWareki(year,3,31), 3, `${radio.value}　卒業`]);
      }
      break;
    }
  }
  //計算終了
  //描画処理
  el_table_output__tbody.textContent = ''
  array_table.forEach(array=>{
    const el_tr = document.createElement('tr');
    array.forEach(val=>{
      const el_td = document.createElement('td');
      el_td.classList.add('table-output__td');
      el_td.textContent = val;
      el_tr.appendChild(el_td);
    });
    el_table_output__tbody.appendChild(el_tr);
  });
}

function toWareki(yyyy,m,d){
  const date = new Date(`${yyyy}-${m}-${d}`);
  const str_date = date.toLocaleDateString('ja-JP-u-ca-japanese',{era: 'short'});
  const array_date = str_date.split('/');
  if(array_date.length>0){
    return array_date[0]+'年';
  }else{
    return 'error';
  }
}
})();