1

Hace unos dias un miembro de esta Comunidad me ayudó a realizar un proyecto en JS el cual calculaba las fechas finales a partir de los meses la fecha final se calculaba pero no caimos en cuenta que el dia aveces variaba por los dias no labolares por lo que me gsutaria que a este script que el me ayudo, solo muestre el mes y el año y deje el campo dia del input date vacio para agregarlo manualmente.

Los campos fecha inicial, fecha fin y fecha preaviso dependen del calculo que se haga en el campo duración donde se agrega un numero (meses) pero que lo siga haciendo tal cual como este en el script, solo que no calcule los días pues como dije estos varían por los días No laborales y para evitar errores mejor se agregan manualmente...

<input style="width: 120px;" name="fechainicial" type="date" id="fechainicial" size="60" max="9999-12-31" class="validar" onChange = "calcularFin()" required>

Este es el el script...

<script>
    const imeses = document.getElementById('duracion');
    const ifechainicial = document.getElementById('fechainicial');
    const ifechafinal = document.getElementById('fechafinal');
    const ifpreaviso = document.getElementById('fechapreaviso');
    
    function calcularFin() {
      let meses =  imeses.valueAsNumber;
      let fechaini = ifechainicial.valueAsDate;
      let fechafin = new Date(fechaini.setUTCMonth(fechaini.getUTCMonth()+meses));
      
      fechafinal.valueAsDate = fechafin;
      const menosUnmes = new Date(fechafin.setUTCMonth(fechafin.getMonth()-1));
      ifpreaviso.valueAsDate = new Date(menosUnmes.setUTCDate(menosUnmes.getUTCDate()-10));
    
    }
    
    ifechainicial.valueAsDate = new Date();
    calcularFin();
</script>

este es el hilo de la entrada del post

restar un mes y unos dias a fecha dada

9
  • Tendriamos que ver que fue lo que esa persona te ayuda a hacer, ya que en lo que has compartido esta bastante enrredado y el html le faltan cosas, tambien deberias argumentar que has intentado hacer... ya que hasta donde persivo estas esperando que te hagan la tarea ... y los chicos de la comunidad suelen ver mal eso ... Commented el 27 jun. a las 16:30
  • 1
    en este enlace es donde se da solución solo hacerle esa modificación.. no calcular el día ya que este varia es.stackoverflow.com/questions/621713/…
    – Eduardo
    Commented el 27 jun. a las 16:36
  • Según el código de esa maravillosa respuesta, basta con quitar el readonly del input para que puedas editar el día a gusto
    – Yussef
    Commented el 27 jun. a las 16:39
  • la fecha se puede editar sin problemas, lo que no se quiere es que al hacer el calculo lo haga como esta pero que omita el día (en los input fecha) no haga el calculo del día solo el mes como esta y año como esta... pues al mostrar el día crea confusión...
    – Eduardo
    Commented el 27 jun. a las 16:44
  • Para aclarar, tu estas diciendo que: Quieres un input donde puedas editar solo la parte día, pero el mes y año queden estáticos?? y cual sería el input que se tiene que comportar así?
    – Yussef
    Commented el 27 jun. a las 17:39

1 respuesta 1

1

Para que un input[date] te permita solo seleccionar el día correspondiente en un mes, debes asignar los atributos max y min, los cuales deben estar dentro del mes en cuestión.

El formato debe ser yyyy-MM-dd, y para obtener esos datos puedes realizar un split al retorno de la función toISOString(), que retorna algo del estilo de: 2011-10-05T14:48:00.000Z

const imeses = document.getElementById('meses');
const ifechainicial = document.getElementById('fechainicial');
const ifechafinal = document.getElementById('fechafinal');
const ifpreaviso = document.getElementById('preaviso');

function calcularFin() {
  const meses =  imeses.valueAsNumber;
  const fechaini = ifechainicial.valueAsDate;
  if(!meses || !fechaini ) return;
  
  const fechafin = new Date(fechaini.setUTCMonth(fechaini.getUTCMonth()+meses)); 
  setMinMaxFecha(fechafin,fechafinal); 

  const menosUnmes = new Date(fechafin.setUTCMonth(fechafin.getMonth()-1));
  setMinMaxFecha(menosUnmes,ifpreaviso); 


}

function setMinMaxFecha(fecha, input){
  fecha = new Date(fecha);
  let parts = fecha.toISOString().split("-");
  const min = `${parts[0]}-${parts[1]}-01`
 
  fecha.setUTCMonth(fecha.getUTCMonth()+1);
  fecha.setUTCDate(0);
  parts = fecha.toISOString().split("T")[0].split("-");
  const max = `${parts[0]}-${parts[1]}-${parts[2]}`
 
  input.value = "";
  input.max = max;
  input.min = min;
}

calcularFin();
<p>Meses:
  <input type="number" name="meses" id="meses" min="1" max="12" onchange = "calcularFin()">
  <br>
  Fecha Inicial
  <input type="date" id="fechainicial" onchange="calcularFin()"/>
  <br>
  Fecha fin: 
  <input type="date" id="fechafinal" />
</p>
<p>Fecha Preaviso:
  <input type="date" id="preaviso"/>
</p>

10
  • excelente lo hace en la fecha Preaviso, también debería hacerlo en la fecha Fin en que parte del código lo hace y obvio hay que quitar el readonly para poder agregar manualmente el día a Fecha Fin? asi como esta pero que en fecha fin el dia salga por ejemplo __-09-2024
    – Eduardo
    Commented el 27 jun. a las 20:04
  • otra cosa como hago para que no muestre la fecha actual en el campo fecha inicial al cargar el form
    – Eduardo
    Commented el 27 jun. a las 20:14
  • 1
    @Eduardo A ver prueba ahora
    – Yussef
    Commented el 27 jun. a las 20:21
  • Yussef ocurre algo probando el codigo por ejemplo coloco en el campo Meses el numero 3 y en fecha inicial 01/06/2024 y cuando el dia es 01 en fecha inicial no aparece mes en los campos fin y presaviso... solo aparece el año.. sera algo con el dia 01 inicial.. por que al poner dia 02 en inicial si hace el calculo normal como se quiere en los campos fin y preaviso...
    – Eduardo
    Commented el 27 jun. a las 20:41
  • @Eduardo El problema era que utilicé getMonth en lugar de getUTCMonth, y tiene relación con lo que te comentaba en una respuesta anterior que te di. Esta corregido
    – Yussef
    Commented el 27 jun. a las 20:49

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.