Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

265
Vistas
¿Cómo cambiar el marcador de posición de jQuery datepicker a dos semanas a partir de la fecha actual?

Quiero actualizar el marcador de posición de la entrada "Fin" (id="datepicker2) a la fecha 2 semanas después de la fecha de inicio (id=datepicker). Hasta ahora, solo se actualiza el valor de la fecha de finalización cuando el usuario selecciona una nueva fecha de inicio del calendario. En el caso de que el usuario deje la fecha de inicio predeterminada, quiero que vea la fecha de finalización también, no " en 2 semanas ".

HTML

 <form class="reminderControls"> <label for="startDate">Start:</label> <!-- START DATE --> <div class="dateParent"> <input type="text" id="datepicker" value=""> </div> </form> <form class="reminderControls"> <label for="endDate">End:</label> <!-- END DATE--> <div class="dateParent2"> <input type="text" id="datepicker2" value="" placeholder="in 2 weeks"> </div> </form>

JQUERY

 $(function () { $('.dateParent').datepicker({ inline: true, altField: '#datepicker', onSelect: function () { var selectedDate = $('.dateParent').datepicker('getDate'); var endDate = new Date(selectedDate); endDate.setDate(endDate.getDate() + 14); var endDateStr = (endDate.getMonth() + 1) + '/' + endDate.getDate() + '/' + (endDate.getYear() + 1900); $('#datepicker2').val(endDateStr); //changes value of end date } }); $('#datepicker').focus(function (event) { event.preventDefault(); $('.ui-datepicker').addClass('shown'); return false; }); $(document).click(function (event) { if (!$(event.target).is('.dateParent *')) $('.ui-datepicker').removeClass('shown');; }); });

ESTADO PREDETERMINADO (FECHA DE INICIO ES FECHA ACTUAL)

ingrese la descripción de la imagen aquí

DESPUÉS DE QUE EL USUARIO SELECCIONA UNA FECHA DIFERENTE

ingrese la descripción de la imagen aquí

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Probé el código que publicaste y parece funcionar. Hice algunos cambios menores que tal vez quieras considerar.

 $(function() { $('.dateParent').datepicker({ inline: true, altField: '#datepicker', onSelect: function(dt, obj) { var selectedDate = $('.dateParent').datepicker('getDate'); var endDate = new Date(selectedDate); endDate.setDate(endDate.getDate() + 14); // changes placeholder of end date $('#datepicker2').attr("placeholder", $.datepicker.formatDate("mm/dd/yy", endDate)); } }); $('#datepicker').focus(function(event) { event.preventDefault(); $('.ui-datepicker').addClass('shown'); return false; }); $(document).click(function(event) { if (!$(event.target).is('.dateParent *')) $('.ui-datepicker').removeClass('shown');; }); });
 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <form class="reminderControls"> <label for="startDate">Start:</label> <!-- START DATE --> <div class="dateParent"> <input type="text" id="datepicker" value=""> </div> </form> <form class="reminderControls"> <label for="endDate">End:</label> <!-- END DATE--> <div class="dateParent2"> <input type="text" id="datepicker2" value="" placeholder="in 2 weeks"> </div> </form>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda