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:
$(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:
Yo tengo este calendario con los enlaces online, en que parte le puedo agregar este código para que funcione en español?
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.
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!
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 ...
como lo hago para cambiar el tamaño del calendario si tengo el css de jquery por url solamente :(
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.
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.
Como le hago para cuando me seleccione una fecha me redireccione a otra pagina dependiendo de la fecha seleccionada
Hay alguna forma de modificar el programa para que se puedan seleccionar varias fechas? ... Saludos
Muchas gracias, de verdad muy util
$(function() {
$( "#datepicker2" ).datepicker( "option", "yearRange", "1960:2014");
});
Donde id=datepicker2
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
Publicar un comentario