Datepicker jQuery
En este artículo vamos a detallar varios ejemplos de como utilizar el datepicker de jQuery Interface User.
Lo primero que tendremos que hacer es ir a la página de jQuery UI donde tendremos dos opciones: descargar uno de los templates ya existentes. Hay muchos y ya te podrían satisfacer o si quieres tu propio template puedes acceder a Themes para crearlo y descargarlo.
Una vez tenemos los archivos descargados serán de vital importancia 4 más la carpeta de imágenes del tema. Estos 4 archivos son los siguientes y debemos incorporarlos en el <head> de nuestra página Web:
<link type="text/css" href="css/ui-darkness/jquery-ui-1.8.23.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="js/jquery.ui.datepicker-es.js"></script>
Los 3 primeros archivos vienen en el paquete de descarga y se corresponden a los estilos del theme, la librería jQuery y la customización de scripts donde tendremos la funcionalidad del datepicker.
El último archivo representa el idioma en el que se va a mostrar el datepicker. En este caso hemos obtenido el español.
Para implementar un datepicker simple deberemos añadir al <head> lo siguiente:
<script type="text/javascript">
$(function() {
$("#demo1").datepicker();
</script>
Y luego en el <body> añadir el campo o input con id=»demo1″:
<label>Selecciona fecha:</label><input id="demo1" type="text" name="fecha1">
Obteniendo como resultado:
Si queremos ver un ejemplo más complejo, podríamos obtener la fecha seleccionada y guardarla con AJAX de la siguiente forma:
<script type="text/javascript">
$(function() {
$('#demo9').datepicker({
onSelect: function(selectedDate) {
var dataString = 'date='+selectedDate;
$.ajax({
type: "POST",
url: "save.php",
data: dataString,
success: function(data) {
$('#result').empty();
$('#result').html(data);
}
});
}
});
});
</script>
Y en el <body>:
<label>Selecciona fecha:</label><input id="demo9" type="text" name="fecha2"><div id="result"></div>
En el ejemplo que mostramos a continuación podremos ver tanto la utilización básica como la utilización con AJAX, pero también podrás observar otras opciones del datepicker como por ejemplo: como darle formato a la fecha seleccionada, como restringir fechas muy útil para cuando no quieras que los usuarios puedan seleccionar una fecha ya pasada o futura, como añadir un selector de año y mes, muy útil para las fechas de nacimiento, como mostrar la semana, como mostrar varios meses, mostrar el datepicker con botón al lado, programar un rango de fechas y mostrar la fecha seleccionada en una alerta.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
gracias 🙂
Disculpa podrías proporcionar la documentación del último ejemplo:
Guardar fecha mediante AJAX
Necesito obtener la fecha y convertirla a Date para usarla en listas, en java.
Por favor!
Hola,
La llamada ajax la hacemos asi:
$(‘#demo9’).datepicker({
onSelect: function(selectedDate) {
var dataString = ‘date=’+selectedDate;
$.ajax({
type: «POST»,
url: «save.php»,
data: dataString,
success: function(data) {
$(‘#result’).empty();
$(‘#result’).html(data);
}
});
}
});
y luego se debe programar el save.php para que retorne lo que te interese desde el servidor.
Hola, me gustaria ver el codigo del archivo save.php ya que no estoy familiarizado con este tipo de ajax «data: dataString,»
Disculpa y como puedo omitir los domingos o días especificos. este es mi codigo:
$(function() {
$(‘#dob’).datepicker({dateFormat: ‘DD d MM yy’, changeMonth: true, changeYear: true, yearRange: ‘-100:+0’});
});
$(function () {
$.datepicker.setDefaults($.datepicker.regional[«es»]);
$(«#dob»).datepicker({
firstDay: 1
});
});