Hola a Todos como están espero me puedan ayudar con esto.. tengo 2 campos fechas (Fecha Inicial y fecha Final) y también un campo donde se le agrega un numero para representar los meses que durará esas fechas me gustaría que al poner en la primera fecha la fecha inicial y al poner por ejemplo 3 meses de duración el otro input date cambie según este numero (es decir ponga la fecha final) aquí represento en esta imagen lo que mas o menos quiero todo al ínstate 

[![introducir la descripción de la imagen aquí][1]][1]


  [1]: https://i.sstatic.net/HZGLfQOy.png


CODIGO 

    

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <table width="542" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td height="32"><span class="texy">Duración:</span></td>
        <td colspan="3"><input name="duracion" type="number" id="duracion" size="5" style="width:40px" class="validar" required onkeypress="nextFocus('duracion', 'fechainicial')">
          <input name="duracion2" type="text" id="duracion2" value="MESES" size="12" class="validar" required></td>
      </tr>
      <tr>
        <td height="32"><span class="texy">Fecha Ingreso:</span></td>
        <td colspan="3"><input style="width: 120px;" name="fechainicial" type="date" id="fechainicial" size="60" max="9999-12-31" class="validar" required onkeypress="nextFocus('fechainicial', 'fechafinal')"></td>
      </tr>
      <tr>
        <td height="32"><span class="texy">Fecha Final:</span></td>
        <td colspan="3"><input style="width: 120px;" name="fechafinal" max="9999-12-31" type="date" id="fechafinal" size="40" class="validar" required onkeypress="nextFocus('fechafinal', 'userfile')"></td>
      </tr>
    </table>

<!-- end snippet -->