Categoría: JQuery

Cómo habilitar el último día de cada mes en datepicker de Jquery

Si queremos habilitar sólo el último día de cada mes podemos añadir este script en el head de nuestra página web:

$(function() {
    $( "#datepicker" ).datepicker();
  });
  function LastDayOfMonth(Year, Month)
{
    return(new Date((new Date(Year, Month+1,1))-1)).getDate();
}
  $(function() {
   $('#txtDate').datepicker({
       beforeShowDay: function (date) {
        //getDate() returns the day (0-31)
        if (date.getDate() == LastDayOfMonth(date.getFullYear(),date.getMonth())) {
            return [true, ''];
        }
        return [false, ''];
    }
   });
});

Con lo que tendríamos lo siguiente para el mes de Septiembre de 2015:

Datepicker último día de cada mes

 

El código completo para que funcione en un archivo .html sería el siguiente:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  function LastDayOfMonth(Year, Month)
{
    return(new Date((new Date(Year, Month+1,1))-1)).getDate();
}
  $(function() {
   $('#txtDate').datepicker({
       beforeShowDay: function (date) {
        //getDate() returns the day (0-31)
        if (date.getDate() == LastDayOfMonth(date.getFullYear(),date.getMonth())) {
            return [true, ''];
        }
        return [false, ''];
    }
   });
});
</script>
</head>
<body>
Fecha: <input type='text' id='txtDate' />
</body>
</html>

Cómo desactivar los sábados y domingos del calendario en datepicker de Jquery

Si queremos desactivar en el calendario los días del fin de semana, sábado y domingo, tenemos que incluir este script en el head de nuestro página web:

$(function() {
   $('#txtDate').datepicker({ 
       beforeShowDay: $.datepicker.noWeekends 
   });
});

Aplicando esté código tendríamos lo siguiente:

Jquery desactivar datepicker sabados y domingos

Aquí está todo el código completo para que funcione en un archivo html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
  <script>
  $(function() {
   $('#txtDate').datepicker({ 
       beforeShowDay: $.datepicker.noWeekends 
   });
});
</script>
</head>
<body>
Fecha: <input type='text' id='txtDate' />
</body>
</html>

Flot: Cómo conseguir que se vea en IE (Internet Explorer) en instalaciones antiguas de Flot

Si estamos utilizando una versión antigua de Flot es posible que veamos las gráficas en todos los navegadores menos en explorer.

He podido solucionarlo modificando el archivo jquery.flot.js en las siguientes líneas:
línea 317:

if ($.browser.msie)

a

if (($.browser.msie)&& (( parseInt($.browser.version, 10) ) < 9))

y línea 323:

if ($.browser.msie)

a

if (($.browser.msie)&& (( parseInt($.browser.version, 10) ) < 9))

Esta solución en principio estaba hecha para IE9, pero la acabo de probar en IE10 e IE11 y también funciona.

Cómo no permitir seleccionar en Datepicker de Jquery los días pasados

Si queremos evitar que sean seleccionables los días pasados en el calendario en forma de popup emergente que tenemos con jquery al utilizar datepicker tenemos que hacer lo siguiente:
Para ver un calendario en forma de popup normal tenemos que poner:

<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>

con lo que vemos esto:

Calendario Jquery Popup con dias pasados seleccionables
Calendario Jquery Popup con dias pasados seleccionables

Para no permitir que los días pasados sean seleccionables tenemos que poner lo siguiente:

<script>
$(function() {
$("#datepicker").datepicker({ minDate: 0 });
});
</script>

Calendario Jquery Popup no permite seleccionar dias pasados
Calendario Jquery Popup no permite seleccionar dias pasados

con lo que tenemos un calendario que no permite seleccionar los días pasados.

Posicionar cursor en primer campo del formulario con JQuery

Para posicionar el cursor en el primer campo del formulario utilizando JQuery primero debemos llamar a JQuery:

<script src="/es/ext/js/jquery.js" type="text/javascript"></script>

Después llamar a siguiente función:

<script type="text/javascript">
$(function () {
$(window).load(function () {
$(':input:visible:enabled:first').focus();
});
})
</script>