calendario – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Wed, 25 Nov 2015 02:19:23 +0000 es hourly 1 https://wordpress.org/?v=5.6.16 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png calendario – ProgramaciónExtrema.com https://programacionextrema.com 32 32 Datepicker con jQuery UI https://programacionextrema.com/2015/10/26/datepicker-con-jquery-ui/ https://programacionextrema.com/2015/10/26/datepicker-con-jquery-ui/#respond Mon, 26 Oct 2015 18:43:19 +0000 http://programacionextrema.com/?p=299 En este tutorial aprenderemos a utilizar el Datepicker del plugin jQuery UI con varios ejemplos sencillos. Ejemplos de Datepicker con jQuery UI En este primer ejemplo veremos lo básico que se debe tener en cuanta a la hora de mostrar un Datepicker al hacer click sobre un input de tipo text: Una característica importante de… Read More

La entrada Datepicker con jQuery UI aparece primero en ProgramaciónExtrema.com.

]]> En este tutorial aprenderemos a utilizar el Datepicker del plugin jQuery UI con varios ejemplos sencillos.

Ejemplos de Datepicker con jQuery UI

En este primer ejemplo veremos lo básico que se debe tener en cuanta a la hora de mostrar un Datepicker al hacer click sobre un input de tipo text:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>jQuery UI Datepicker</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
      $(function() {
        $( "#datepicker" ).datepicker();
      });
    </script>
  </head>
  <body>
    <p>Date: <input type="text" id="datepicker"></p>
  </body>
</html>

Una característica importante de este plugin es que nos permite configurar nuestro Datepicker a gusto. Estas son algunas de las opciones que nos proporciona:

Rango de fechas en Datepicker con jQuery UI

Esto lo debemos indicar con las variables minDate y maxDate. Los valores pueden ser un número (en días) o un string (meses y días) como el siguiente ejemplo:

$(function() {
   $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});

Dar formatos a fechas en Datepicker con jQuery UI

Esto lo podemos realizar de la siguiente manera:

$(function() {
 $( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy'});
});

Los distintos formatos que se aceptan son: «DD, d MM, yy», «d MM, y», «d M, y», «yy-mm-dd» y «mm/dd/yy».

Animar Datepicker con jQuery UI

Para animar el Datepicker debemos indicarle una animación con la variable showAnim

$(function() {
  $( "#datepicker" ).datepicker({ showAnim: 'clip'});
});

Las animaciones pueden ser: «show», «slideDown», «fadeIn», «blind», «bounce», «clip», «drop», «fold» y «slide».

Estas son unas de las tantas cosas que se pueden hacer con un Datepicker en jQuery UI. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.
Si se quedaron con ganas de ver más ejemplos pueden ingresar a la página ofical de jQuery UI: https://jqueryui.com/datepicker

La entrada Datepicker con jQuery UI aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/10/26/datepicker-con-jquery-ui/feed/ 0 Calendario con jQuery https://programacionextrema.com/2015/10/18/calendario-con-jquery/ https://programacionextrema.com/2015/10/18/calendario-con-jquery/#comments Sun, 18 Oct 2015 03:09:32 +0000 http://programacionextrema.com/?p=179 A menudo los calendarios pueden ser útiles para registrar diversos eventos en una página web. En este artículo veremos cómo crear un calendario con jQuery usando el plugin fullCalendar. Este plugin ofrece muchas opciones para modificar a gusto el calendario, es por ese motivo que para mi es el mejor. Así es como se ve… Read More

La entrada Calendario con jQuery aparece primero en ProgramaciónExtrema.com.

]]> A menudo los calendarios pueden ser útiles para registrar diversos eventos en una página web. En este artículo veremos cómo crear un calendario con jQuery usando el plugin fullCalendar. Este plugin ofrece muchas opciones para modificar a gusto el calendario, es por ese motivo que para mi es el mejor.

Así es como se ve este maravilloso plugin de calendario con jQuery ya insertado en una página web:

Crear calendario con jQuery

Calendario con jQuery

Antes de empezar es necesario descargar el plugin fullCalendar desde su sitio web fullcalendar.io/download.

Creando un calendario con jQuery y Java Script

Primero es necesario importar el plugin y sus dependencias en nuestro código html usando el tag script:

<link href='mipath/fullcalendar.css' rel='stylesheet' />
<link href='mipath/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='mipath/moment.min.js'></script>
<script src='mipath/lib/jquery.min.js'></script>
<script src='mipath/fullcalendar.min.js'></script>

Tener en cuenta que se debe cambiar «mipath» por la ubicación real del archivo. Una vez importadas las dependencias podemos empezar a crear nuestro calendario en jquery. Esta tarea se puede hacer en muy pocas lineas de código:

 <div id='calendar'></div>
 <script>
    $(document).ready(function() {
      $('#calendar').fullCalendar();
    });
 </script>

Obviamente que ese calendario no tendrá eventos ni funcionalidad. Ahora si quisiéramos agregarle algunos eventos al crearlo, podríamos pasárselos como parámetro de la siguiente manera:

$('#calendar').fullCalendar({
  events: [
  {
    title: 'Ejemplo de evento',
    start: new Date()
  },
  {
    title: 'Ejemplo de evento 2',
    start: new Date()
  }]
});

Y si quisiéramos agregar un evento al clickear un botón o en el resultado de una petición AJAX, podríamos hacerlo utilizando el evento renderEvent:

$('#calendar').fullCalendar( 'renderEvent', {
    title: 'Ejemplo de evento 3',
    start: new Date()
});

Además de manipular eventos este plugin permite ser configurado para cambiarle el idioma, estilos, visibilidad del menú y muchas otras cosas más que pueden ser vistas en los ejemplos que vienen incluidos al descargarse este maravilloso plugin.

Espero que les sea de gran utilidad este artículo y ante cualquier inconveniente o sugerencia que tengan no duden en dejar un comentario.

La entrada Calendario con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/10/18/calendario-con-jquery/feed/ 2