0

¡Hola!

Necesito ayuda para algo que lleva ya un par de días rondando mi cabeza y no logro ver la forma de como siquiera empezar (Lo se, suena pretencioso, pero a todos nos ah pasado alguna vez en esta vida).

Lo que pasa es que tengo 3 input´s de fecha (fecha1, fecha2 y fecha3).

introducir la descripción de la imagen aquí

Con ellos quisiera hacer que cuando ponga una fecha en el primer input: introducir la descripción de la imagen aquí

Los demás se sumen automáticamente en 3 días y el que le sigue a ese sume 30 días (No que sume 33 días, tendría que ser por separado, sume los 30 días que tiene del input "fecha2" ya que si se modifica este (fecha2), el input "fecha3" debe cambiar a 30 días más). Para simplificar:

introducir la descripción de la imagen aquí

Eh estado viendo la forma de lograr el cometido, y al momento, leí que pudiera funcionar con la función strtotime pero no se como quedaría dicha función (Soy nood y trato de aprender dia con dia, mis maestros no me enseñan lo suficiente) espero no sonar egoísta o algo parecido, pero de verdad, quiero aprender mas.

Estoy trabajando con Bootstrap en codeigniter, para este caso, creo seria mas con JQUERY, no?

2
  • Pero ésto querés hacerlo a medida que se modifican los inputs? Porque entonces lo conveniente sería hacerlo con javascript.
    – azeós
    Commented el 19 dic. 2017 a las 5:22
  • Cierto... Eso seria: A medida de poner el 1er input, lo que seria en tiempo real...
    – González
    Commented el 19 dic. 2017 a las 5:26

1 respuesta 1

1

Use la librería Moment.js para manipular las fechas.

A medida que tipeas en la fecha 1 se chequea si el formato de la fecha es válido. Cuando lo es, carga el valor para fecha 2 y fecha 3. Si modificas la fecha 2 se modifica la fecha 3. El problema es que si volvés a tipear en la fecha 1, se modifican las otras dos fechas. Por otro lado, no se si tenés que poder modificar la fecha 3 a mano o no.

Si no cumple exactamente con lo que necesitás, avisame y lo vamos modificando.

$('#fecha1').change(function() {
  var fecha1 = $(this).val();
  var time = moment(fecha1, 'YYYY-MM-DD', true);
  if (time.isValid()) {
    var fecha2 = time.add(3, 'd');
    $('#fecha2').val(fecha2.format('YYYY-MM-DD'));
    var fecha3 = fecha2.add(30, 'd');
    $('#fecha3').val(fecha3.format('YYYY-MM-DD'));
  }
});

$('#fecha2').change(function() {
  var fecha2 = $(this).val();
  var time = moment(fecha2, 'YYYY-MM-DD', true);
  if (time.isValid()) {
    var fecha3 = time.add(30, 'd');
    $('#fecha3').val(fecha3.format('YYYY-MM-DD'));
  }
});
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="form-group col">
      <label for="fecha1">Fecha 1</label>
      <input type="date" class="form-control" id="fecha1" placeholder="dd/mm/aaaa">
    </div>
    <div class="form-group col">
      <label for="fecha2">Fecha 2</label>
      <input type="date" class="form-control" id="fecha2" placeholder="dd/mm/aaaa">
    </div>
    <div class="form-group col">
      <label for="fecha3">Fecha 3</label>
      <input type="date" class="form-control" id="fecha3" placeholder="dd/mm/aaaa">
    </div>
  </div>
</div>

15
  • Mil gracias por responder, solo tengo una pequeña duda, veo que los input son de tipo text, hay algún problema si fueran tipo DATE?
    – González
    Commented el 19 dic. 2017 a las 6:28
  • @Dante No, debería ser exactamente lo mismo. Lo importante es que se respete el formato de la fecha D/M/YYYY o DD/MM/YYYY.
    – azeós
    Commented el 19 dic. 2017 a las 6:31
  • 1
    @Dante listo, ahí actualicé para que funcione con type date.
    – azeós
    Commented el 19 dic. 2017 a las 16:43
  • 1
    @Dante var hoy = moment().format('YYYY-MM-DD') devuelve la fecha actual. $('#fecha1').val(hoy) se la asigna a fecha1, si querés que eso ejecute automáticamente el resto del código, agregale después del val .change().
    – azeós
    Commented el 27 dic. 2017 a las 21:01
  • 1
    @Dante pone ese código después del anterior.
    – azeós
    Commented el 27 dic. 2017 a las 21:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.