0

Como puedo convertir este código de jquery a javascript puro, ya que quiero bloquear unos días en un calendario y este es el único código que he encontrado.

 <input type="text" value="Select Date Here"/>


var disabledDates = ["2015-11-28","2015-11-14","2015-11-21"]


<script>    $('input').datepicker({
beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
    return [ disabledDates.indexOf(string) == -1 ]
}
});
</script> 
2
  • 1
    El problema es que tu código usa datepicker, que es parte de jQuery. Para pasar tu código en JS puro, tendrás que buscar una librería escrita en JS puro que sustituya a datepicker.
    – A. Cedano
    el 26 sep. 2019 a las 18:44
  • la verdad estoy usando esta libreria mauroreisvieira.github.io/hello-week/# que ya tiene un DisableDates, pero al traer la DB de las fechas que quiero bloquear no me funciona, lo estoy haciendo por medio de ajax el 30 sep. 2019 a las 17:42

2 respuestas 2

2

Una opción podría ser usando Pickaday (no jquery), en el que la idea sería poder comparar las dos fechas. La misma idea se aplicaría a cualquier calendario.

var disabledDates = ["2019-09-30", "2019-08-24", "2019-08-25", "2019-08-26"]

//quitamos los ceros a la izquieda para poder comparar 
disabledDates = disabledDates.map(e => e.split("-").map(n => +n).join("-"));


var picker = new Pikaday({
  field: document.getElementById('datepicker'),
  position: "bottom",
  disableDayFn: function(date) {

    //El dia del calendario lo ponemos en un formato comparable
    let d = new Date(date);
    let dia = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;

    if (disabledDates.includes(dia)) {
      return true;
    }

  }
});
.wrapper{
margin:150px;
}
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css"> 
<div class="wrapper">
  Fecha
  <input type="text" id="datepicker">
</div>

1
1
<input type="date" min="2019-06-02" max="2019-06-08"/>

si mal no entiendo quieres bloquear ciertas fechas con un control input date, con el ejemplo de arriba funcioaria basicamente no cumpliendo lo que pides,

si es un input text debieras agregar el evento onblur y validar la entrada en dicho evento obviando las fechas que quieres sacar!

<input type="text" onBlur="ValidarFecha(this.value)"/>


function ValidarFecha(valor)
{
    if(disabledDates.indexOf(valor)=="")
    {
        //no existe fecha y pasa
    }
    else
    {
        //existe fecha hacemos algo
    }
}
1

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.