0

Estoy utilizando el datepicker boostrap y me gustaria saber como setear un maxDate y minDate en un input. Por ejemplo tengo el siguiente codigo:

{{-- HTML --}}
<input type="text" class="form-control datetimepicker">

{{-- JS--}}
var maxDate = '2020/12/15';
var minDate= '2020/12/01';

$('.datetimepicker').datetimepicker({
  useCurrent: false,
  format:'YYYY/MM/DD',
  maxDate: maxDate,
  minDate: minDate
})

Asi es como se colocaria normalmente el maxDate y minDate, pero al hacerlo de forma dinamica creando cada input y seteando en cada elemento sus propias maxDate y minDate, nose como podria hacerlo. Una forma en la que se me ocurrio realizarlo seria poniendole id a cada uno individualmente para poder setear estos valores, pero lo veo ineficiente porque se esta creando de forma dinamica. Si quieren el codigo de como creo ese input, es el siguiente

function AgregarInput(btn)
{
  $('#inputs').append('<input type="text" class="form-control datetimepicker"><br>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="add" onclick="AgregarInput(this)">Agregar</button>
<br>
<div id="inputs"></div>

Gracias a todos!

1 respuesta 1

0

En tu función AregarInput() debes instanciar los nuevos datepickers después de añadirlos al DOM.

function AgregarInput()
{
    // genera el input en una variable
    const $input = $('<input type="text" class="form-control datetimepicker">');

    // añádelo al DOM
    $('#inputs').append($input).append('<br'>);

    // instancia el datepicker en el nuevo input
    $input.datetimepicker({
        /*.. opciones ..*/
    });
}

Para las opciones, sin son distintas de unos inputs a otros, podrías pasar los valores por parámetro en la función AgregarInput(datetimepickerOptionsObject).

Ejemplo funcionando: https://codepen.io/kmsdevnet/pen/oNzzGYP

4
  • Despues del $input.datetimepicker, no se tiene que agregar algo mas para que se actualize o simplemente se creara con las opciones ya especificadas?
    – bemoba1437
    Commented el 9 dic. 2020 a las 13:32
  • Cuando creas un elemento nuevo también tienes que crear un datepicker nuevo (con sus opciones) para ese elemento. Con ese código ya estás generando inputs con sus datepickers de forma dinámica. Ahora te falta el encontrar la manera de pasar opciones distintas a cada uno.
    – kosmos
    Commented el 9 dic. 2020 a las 13:54
  • Lo que me refiero es que si se tiene que hacer un datetimepicker('update') o algo asi, porque no me crea correctamente los datetimepicker (No me sale la vista de calendario para seleccionar)
    – bemoba1437
    Commented el 9 dic. 2020 a las 14:35
  • He modificado la respuesta añadiendo un ejemplo. Además tenía un fallo en el código que te puse, lo correcto es .append($input).append('<br>') en lugar de concatenar el <br>. codepen.io/kmsdevnet/pen/oNzzGYP
    – kosmos
    Commented el 9 dic. 2020 a las 14:53

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.