sábado, 9 de febrero de 2013

datepicker en formato español y restricción de fechas jQuery UI


datepicker es una de las utilidades más solicitadas de jquery UI, ya que permite personalizar calendarios a la medida, de lo contrario sería necesario cientos de líneas de código para obtener los buenos resultados que proporciona esta función.

En Jquery UI datepicker se pueden encontrar mucho ejemplos de calendarios personalizados ...


- Cambiar estilos CSS del datepicker
- Calendario predeterminado
- Calendario con animación
- Calendario con días, meses y años
- Calendario con múltiples meses
- Calendario con icono de apertura
- Calendario con rango de fechas
...

Calendario en español con restricción de fechas disponibles:

Javascript ...
  $(function() {
    
 //Array para dar formato en español
  $.datepicker.regional['es'] = 
  {
  closeText: 'Cerrar', 
  prevText: 'Previo', 
  nextText: 'Próximo',
  
  monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
  monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
  'Jul','Ago','Sep','Oct','Nov','Dic'],
  monthStatus: 'Ver otro mes', yearStatus: 'Ver otro año',
  dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
  dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb'],
  dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
  dateFormat: 'dd/mm/yy', firstDay: 0, 
  initStatus: 'Selecciona la fecha', isRTL: false};
 $.datepicker.setDefaults($.datepicker.regional['es']);
 
 //miDate: fecha de comienzo D=días | M=mes | Y=año
 //maxDate: fecha tope D=días | M=mes | Y=año
    $( "#datepicker" ).datepicker({ minDate: "-1D", maxDate: "+1M +10D" });
  });
 
HTML ...
<p>
Calendario en español con restricción de fechas disponibles: <input type="text" id="datepicker" />
</p>




12 comentarios:

Unknown dijo...

Yo tengo este calendario con los enlaces online, en que parte le puedo agregar este código para que funcione en español?

Manu dijo...

Puedes poner el código entre las etiquetas head o body, también puedes crear un archivo js y lo incluyes en el head, ya es cuestión de preferencias. Saludos.

Anónimo dijo...

Y si se necesita en un formulario usar este calendario en mas de una ocasion? Es decir.. que el formulario contenga varios campos de fecha... como lo haces? a nivel de llamar al calendario y que luego no se lie para pasar los datos? Muchas gracias!

Manu dijo...

Bueno no entiendo muy bien tu pregunta, creo que te refieres a incluir más calendarios con fechas, si es eso simplemente creas más ids ...

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


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


etc ...

Unknown dijo...

como lo hago para cambiar el tamaño del calendario si tengo el css de jquery por url solamente :(

Manu dijo...

Puedes hacerlo a través de los selectores, mozilla tiene una herramienta de desarrollo web muy útil para detectar los selectores de los elementos de la web, luego simplemente los vas cambiando con CSS.

Manu dijo...

Para cambiar los estilos CSS del datepicker mira el siguiente post hay puedes ver como modificar el tamaño del datepicker con las propiedades CSS ... Cambiar propiedades CSS de datepicker - Jquery UI

Saludos.

Unknown dijo...

Como le hago para cuando me seleccione una fecha me redireccione a otra pagina dependiendo de la fecha seleccionada

Anónimo dijo...

Hay alguna forma de modificar el programa para que se puedan seleccionar varias fechas? ... Saludos

Angel dijo...

Muchas gracias, de verdad muy util

Anónimo dijo...


$(function() {
$( "#datepicker2" ).datepicker( "option", "yearRange", "1960:2014");
});

Donde id=datepicker2

Daniel dijo...

Buenos Dias
Yo necesito hacer que todos los segundos sabado de cada mes queden habilitados y los otros no. Alguien me puede ayudar?
Gracias Daniel_dt