Calendario JQuery (datePicker). API de JQuery UI - Calendario de widgets de selector de fecha jquery ui datepicker
¡Hola a todos, queridos lectores de Habr!
Este artículo trata sobre jQuery UI y su widget de selección de fecha.
A menudo sucede que en una página es necesario seleccionar un período de fechas (y a veces incluso varias fechas separadas). Pero el selector de fecha de jQuery UI le permite seleccionar solo una fecha dentro de un único calendario.
Por lo tanto, una solución común en la práctica es crear dos campos de entrada con control del tipo “desde y hasta”. También puede encontrar muchas formas "de muleta" de resolver este problema; esto no nos conviene.
Entonces, nuestro objetivo es resolver el problema con el mínimo esfuerzo utilizando solo jQuery UI Datepicker.
Para resolver este problema, existe una pequeña extensión para jQuery UI Datepicker, que aumenta sus capacidades estándar sin conectar widgets, complementos y estilos de terceros.
Para aquellos que no están interesados en utilizar el widget estándar $.datepicker(), he preparado un par de enlaces, espero que también les resulten útiles:
Artículo sobre Habré (seleccionar varias fechas, elegir un período).
- Excelente complemento DateTimePicker de XDSoft (selección de período de fecha, selección de hora y otras funciones diversas), que vale la pena echarle un vistazo
Hay otras soluciones, pero no me detendré en ellas. Si tiene sus propios calendarios de selección de fechas favoritos, me encantaría leer sobre ellos en los comentarios del artículo.
Descripción de la extensión Una extensión es un archivo que amplía las capacidades del widget $.datepicker() utilizando su modelo de objetos. No afecta la funcionalidad de Datepicker en modo predeterminado. Por lo tanto, no tiene que preocuparse de que su código (ya escrito) se detenga o funcione de manera diferente.La extensión le permite cambiar el comportamiento de selección de fecha en dos modos:
- Seleccione un período (dos fechas: inicio y fin del período)
- Seleccione varias fechas (matriz de fechas)
$("#date_range").datepicker(( range: "period", // valores posibles: period, multiple range_multiple_max: 3, // número máximo de fechas seleccionadas en el modo "Múltiples fechas" onSelect: function(dateText, inst , extensionRange ) ( // extensionRange - argumento de retorno agregado, contiene un objeto de extensión ) )); // El método "setDate" ahora puede aceptar una matriz: 2 elementos con range="period" o más elementos con range="multiple" // $("#date_range").datepicker("setDate", ["+2d ", "+1w"]); // se recomienda utilizar el evento "onSelect" para cambiar los valores de los campos del formulario (o variables en su script) // sin embargo, para un control más flexible, puede obtener un objeto de extensión y trabajar con información sobre el seleccionado fechas var extensionRange = $("#date_range").datepicker ("widget").data("datepickerExtensionRange"); console.log(extensionRange.datesText); // matriz de fechas (fecha en el formato utilizado en datepicker) console.log(extensionRange.startDateText); // inicio del período (fecha en el formato utilizado en el selector de fechas) console.log(extensionRange.endDateText); // fin del período (fecha en el formato utilizado en el selector de fechas) console.log(extensionRange.dates); // matriz de fechas (objeto de fecha) console.log(extensionRange.startDate); // inicio del período (objeto de fecha) console.log(extensionRange.endDate); // fin del período (objeto de fecha)
Nuevos estilos para celdas de calendario.
Selected() /* fecha seleccionada */ .selected-start() /* primera fecha del período */ .selected-end() /* última fecha del período */ .first-of-month() /* primero fecha del mes */ .last-of-month() /* última fecha del mes */
En una de las lecciones aprendimos cómo conectar la biblioteca jQuery UI de diferentes maneras. Hoy el tema de la lección será el widget de selección de fechas: jQuery UI Datapicker.
¿Por qué se necesita este widget? Para proporcionar al usuario un calendario al ingresar una fecha, al completar el formulario, no necesita pensar en qué formato ingresar las fechas. A su vez, el administrador del recurso recibe datos en el mismo formato.
En esta dirección: https://jqueryui.com/datepicker/ Verá varias opciones para el widget del selector de datos, solo veremos las dos principales.
jQuery UI Datepicker: muestra menús de mes y añoCuando el usuario hace clic en el campo de entrada de texto, aparece un calendario con una selección de fecha y un menú adicional con una selección de mes y año. La opción con una fecha es adecuada para sitios donde el cliente indica, por ejemplo, la fecha de su visita.
El código HTML consta de una única etiqueta de entrada con el identificador "datapicker" envuelto en un párrafo: la etiqueta p. En lugar de un párrafo, esta entrada se puede colocar en cualquier elemento de bloque del sitio.
Fecha:
El código jQuery debe copiarse (ver código fuente) y pegarse en su sitio, como en el ejemplo. Después de cargar el árbol DOM, recibiremos el elemento con ID #datapicker en el campo de texto y llamaremos al método .datepicker. Ahora necesita pasar un objeto al método en el que describir configuraciones adicionales: changeMonth: true, changeYear: true. Ahora es posible seleccionar el mes y el año a través de una lista desplegable; esto es un poco más conveniente que hacer una elección similar a través del calendario;
$(función() (
$("#datepicker").datepicker((
cambio de mes: verdadero,
cambioAño: verdadero
});
});
El widget Datapicker con una selección de rango de fechas Date Range es adecuado para sitios con un sistema de reservas. El usuario especifica la fecha de inicio en el primer calendario y la fecha de finalización en el segundo calendario. Creemos dos campos de texto de entrada con identificadores "de" y "hasta" y dos etiquetas vinculadas a sus campos de texto.
De
a
Obtenemos un elemento con el identificador #from, el primer campo de texto, y llamamos al método del selector de datos en él.
$(función() (
var dateFormat = "dd/mm/aa",
desde = $("#desde")
.selector de fechas((
Establezcamos la fecha predeterminada más una semana.
Fecha predeterminada: "+1s",
Posibilidad de cambiar el mes usando una lista desplegable.
CambiarMes: verdadero,
número de meses: 3 ))
Cuando ocurre el evento on, es decir, el usuario selecciona algo de la lista desplegable, luego, cuando cambia la fecha seleccionada, encontramos el segundo selector de fecha y establecemos la fecha mínima igual a la seleccionada.
On("cambiar", función() (
to.datepicker("opción", "minDate", getDate(this));
}),
a = $("#a").selector de fechas
Al cambiar la fecha seleccionada, encontramos el primer selector de fecha y establecemos la fecha máxima igual a la seleccionada.
On("cambiar", función() (
from.datepicker("opción", "maxDate", getDate(this));
});
Todo el código y ejemplos visuales de todas las opciones con diferentes parámetros del widget jQuery Datapicker se encuentran en el sitio web. jqueryui.com.
jQuery UI Datepicker - Localizar calendarioDe forma predeterminada, el calendario se muestra en inglés, pero esto se puede cambiar; la biblioteca jQuery UI admite varios idiomas.
Descargue el archivo de idioma requerido en Github
Incluimos el módulo de idioma requerido en la etiqueta principal.
Creamos un campo de texto para el calendario y una lista desplegable con id "locale" que enumera los idiomas requeridos.
Fecha:
Inglés
ruso (ruso)
Después de cargar el árbol DOM, busque el objeto selector de datos. Cambiamos la configuración para todos los selectores de fechas.
$(función() (
$("#datepicker").datepicker($.datepicker.regional[ "ru" ]);
Cambio de localización para "datepicker".
$("#locale").on("cambiar", función() (
Cambie la localización al seleccionar un nuevo valor en la lista desplegable.
$("#datepicker").datepicker("opción",
$.datepicker.regional[ $(this).val() ]);
Widget de selección de fecha
Este artículo trata sobre el widget Datepicker, un práctico calendario interactivo que facilita la introducción de fechas. Recibir información del calendario como texto de los usuarios siempre es un desafío porque existen muchos formatos diferentes para expresar fechas. El widget Datepicker facilita la selección de una fecha y la presenta de manera coherente, lo que reduce la probabilidad de errores.
Crear un widget de selección de fechaHay dos formas principales de crear un widget de selector de fecha. La forma más común de adjuntarlo a un elemento de entrada es usar el método datepicker(). Esto no cambia inmediatamente la apariencia del elemento, pero tan pronto como el elemento reciba el foco de entrada (haciendo clic en él o navegando hacia él desde otros elementos usando la tecla), se mostrará un calendario junto a él, con el que puede seleccione la fecha deseada.
Los calendarios del tipo descrito se denominan calendarios emergentes. A continuación se ofrece un ejemplo de cómo crear un calendario de este tipo:
Entrada de jQuery UI (ancho: 200px; alineación de texto: izquierda) $(function() ( $("#datep").datepicker(); )); Fecha de:
La imagen muestra lo que sucede cuando mueves el foco a un campo de entrada:
El usuario puede ingresar la fecha manualmente o seleccionarla usando el calendario. Una vez que el elemento de entrada pierde el foco o el usuario presiona la tecla (o), el calendario desaparecerá.
Localización del widget DatepickerComo puede ver, en el ejemplo mostrado, el calendario se muestra en inglés. El widget jQuery UI Datepicker proporciona soporte bastante completo para los diversos estándares de formato de fecha utilizados en todo el mundo, incluidas 61 opciones de localización. Para acceder a ellos, debe importar un script auxiliar de JavaScript a su documento e indicarle al widget Datepicker qué opción de localización usar. A continuación se proporciona un ejemplo correspondiente:
... ... $(función() ( $("#datep").datepicker($.datepicker.regional["ru"]); )); ...
El archivo jquery-ui-i18n.js se encuentra en la carpeta development-bundle/ui/i18n del archivo de la biblioteca jQuery UI, que debería haber descargado de jqueryui.com. Cópielo a la misma carpeta donde se encuentra el archivo fuente y agréguelo al documento como se muestra en el código. El resultado se muestra en la figura:
La segunda forma de utilizar el widget Datepicker implica incrustarlo en un documento. Para hacer esto, seleccione un elemento div o span usando jQuery y llame al método datepicker(). El calendario incorporado se muestra siempre que el elemento HTML en el que se basa esté visible. A continuación se ofrece un ejemplo de creación de un calendario integrado:
Etiqueta jQuery UI (margen-derecho: 12px; ) entrada (ancho: 200px; alineación de texto: izquierda; margen-derecho: 10px) #wrapper > * (flotante: izquierda) $(function() ( $("#inline" ).datepicker($.datepicker.regional["ru"] )); Fecha de:
Este ejemplo utiliza un elemento span como elemento HTML base para crear un widget de selector de fecha. El resultado se muestra en la figura:
El calendario incorporado puede resultar útil si no desea trabajar con objetos emergentes. Por supuesto, hay aplicaciones en las que el trabajo con fechas es tan intenso que tiene sentido tener siempre un calendario a mano. Pero en la mayoría de los casos, tiene sentido dejar el calendario oculto hasta que lo necesites.
La dificultad de ocultar y mostrar el widget Datepicker integrado es que agregarlo a un documento requiere cambiar el diseño de la página, lo que puede causar problemas de presentación. Desde mi punto de vista, en la mayoría de situaciones es mucho más conveniente utilizar un widget emergente.
Configurar el widget de selector de fechaSi ya se ha ocupado del procesamiento de fechas, entonces sabrá lo difícil que es trabajar con esta categoría de datos. Un reflejo de esta complejidad es la variedad de propiedades admitidas por el widget Datepicker. Las siguientes secciones están dedicadas a una descripción de los grupos de propiedades relacionadas con las que se configura este widget.
Ajustes básicosSe utilizan varias opciones de configuración para configurar las propiedades básicas de los calendarios emergentes e integrados. Estas propiedades son muy importantes porque le permiten controlar cómo se integra el widget en el documento. Su lista se da en la siguiente tabla:
| campoalt | Le permite especificar un campo adicional que se actualizará cuando seleccione una fecha en el calendario. |
| botónSoloImagen | Especifica que se debe usar la imagen especificada por la opción ButtonImage en lugar de un botón secundario para abrir el calendario. |
| botónImagen | Define la URL de la imagen utilizada para el botón secundario de apertura del calendario emergente. No utilizado por defecto |
| botón de texto | Define el texto que se mostrará en el botón abrir del calendario emergente. El texto predeterminado son puntos suspensivos (...) |
| fecha predeterminada | Le permite configurar la fecha que se resaltará cuando abra el calendario. |
| desactivado | Indica si el widget debe estar deshabilitado inicialmente. El valor predeterminado es falso |
| mostrar en | Define la acción que desencadena la apertura del calendario emergente. El valor predeterminado es el foco. |
La configuración más sencilla es también la más útil. Usando la opción defaultDate, puede especificar una fecha que se resaltará automáticamente cuando abra el calendario.
Si la opción defaultDate no está configurada, se utiliza la fecha actual. (Por supuesto, esto se refiere a la fecha establecida en el sistema del usuario. Las zonas horarias, el horario de verano o las configuraciones incorrectas pueden hacer que la fecha que se muestra al usuario no sea la esperada).
Esta opción solo se usa si no hay ningún atributo de valor en el elemento de entrada. Si este atributo está presente (ya sea que usted lo incluya en el documento o sea el resultado de una preselección por parte del usuario), entonces el widget Datepicker usará su valor.
Si desea que el calendario se abra con una fecha de inicio diferente, puede configurarlo utilizando uno de los métodos descritos en la siguiente tabla:
| nulo | Se utiliza la fecha actual |
| Objeto de fecha | Utiliza el valor representado como un objeto de fecha de JavaScript. |
| +días, -días | Utiliza una fecha que difiere de la fecha actual en el número de días especificado. Entonces, +3 significa una fecha que ocurrirá tres días después de la actual, y -2 significa una fecha de hace dos días. |
| +1 día +7 semanas -1 mes +1 año | Se utiliza una fecha que se mide a partir de la fecha actual y se expresa en términos del número de días (d), semanas (w), meses (m) y años (y) que determinan cuánto se adelanta la fecha (+). o hacia atrás (-) en el tiempo. Se permite mezclar valores positivos y negativos en una misma fecha. Por ejemplo, la combinación de valores -1d +1m, utilizada en conjunto con la fecha 12 de noviembre de 2011, corresponde al 11 de diciembre de 2011. |
A continuación se proporciona un ejemplo del uso de la opción defauitDate para especificar una fecha dentro de cinco años:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( defaultDate: "+5y" )); ));
Supongamos que la fecha actual es diciembre de 2013. Entonces, como se muestra en la siguiente figura, la fecha determinada por el valor de la opción defauitDate corresponde a diciembre de 2018:
Encontrará el formato descrito para indicar fechas relativas más de una vez. Este es un formato muy flexible que proporciona la precisión necesaria. Del mismo modo que en el ejemplo, puedes omitir cualquier intervalo que no pretendas cambiar. Por ejemplo, en lugar del valor "+0d +0w +0m +5y" es muy posible utilizar el valor "+5y". Lo bueno de este formato es que le permite mezclar valores positivos y negativos para diferentes intervalos, lo que le permite determinar con precisión la fecha deseada.
Definir un evento que desencadena la apertura de un calendario emergenteLa opción showOn le permite controlar el evento en respuesta al cual se debe mostrar el calendario emergente. Esta opción puede tomar uno de tres valores:
enfocarEl calendario emergente se abre cuando el elemento de entrada recibe el foco. Este es el valor predeterminado.
botónEl calendario emergente se abre al hacer clic en el botón.
ambosEl calendario emergente aparece tanto cuando se hace clic en el botón como cuando el elemento de entrada recibe el foco.
Si usa el botón o ambos valores, el widget Datepicker crea un elemento de botón y lo coloca en el documento inmediatamente después del elemento de entrada. A continuación se proporciona un ejemplo del uso de la opción showOn:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both" )); ));
Como se muestra en la figura, ha aparecido un botón en el documento. Debido a que la opción showOn está configurada en ambos en este ejemplo, el calendario emergente se mostrará cuando se haga clic en el botón y cuando el elemento de entrada reciba el foco.
El botón agregado por el widget Datepicker no es un widget de botón jQuery UI. Si desea que todos los botones sean del mismo tipo, seleccione un elemento de botón y llame al método jQuery UI button().
Al elemento del botón se le puede aplicar estilo usando las opciones de imagen de botón y texto de botón. Si configura la opción ButtonImage en la URL de una imagen, el widget Datepicker colocará esa imagen en el botón. Además, el texto predeterminado asociado con un botón (puntos suspensivos) se puede reemplazar con otro texto usando la opción ButtonText, como se muestra en el siguiente ejemplo:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "ambos", buttonText: "Seleccionar" )); ) );
Al usar las opciones buttonImage y buttonImageOnly juntas, puede deshacerse del botón por completo y reemplazarlo con una imagen. A continuación se proporciona un ejemplo correspondiente:
Etiqueta jQuery UI (margen derecho: 12 px) entrada (ancho: 200 px; alineación de texto: izquierda) #dpcontainer * (alineación vertical: medio) #dpcontainer img (ancho: 35 px;) $(función() ( $.datepicker .setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both", buttonImage: "right.png", buttonImageOnly: true )); Fecha de:
Este ejemplo establece la imagen en right.png y establece la opción buttonImageOnly en verdadero. Además, se agregaron varios estilos CSS al documento para controlar la ubicación de la imagen en relación con la etiqueta y los elementos de entrada. El widget Datepicker no puede determinar exactamente dónde colocar el elemento img, por lo que se tuvieron que aplicar estilos CSS para colocar el elemento img correctamente en el documento. El resultado de utilizar una imagen en lugar de un botón se muestra en la figura:
El propósito de un widget Datepicker es permitir al usuario seleccionar una fecha, pero en muchos casos es necesario imponer algunas restricciones a este proceso. La siguiente tabla describe las configuraciones que le permiten establecer restricciones que obligan al usuario a seleccionar solo fechas válidas:
| cambiarmes | Si esta opción es verdadera, el calendario muestra una lista desplegable que le permite navegar directamente por mes. El valor predeterminado es falso |
| cambiaraño | Si esta opción es verdadera, el calendario muestra una lista desplegable que le permite navegar directamente por año. El valor predeterminado es falso |
| restringir entrada | Si esta opción es verdadera, el widget Selector de fecha comprueba que el contenido del campo de entrada coincida con el formato de fecha especificado. El valor predeterminado es verdadero |
| ocultarSiNoAnteriorSiguiente | Si esta opción es verdadera, entonces los íconos que le permiten avanzar y retroceder en el calendario en relación con la fecha mostrada estarán completamente ocultos, en lugar de simplemente deshabilitados. El valor predeterminado es falso |
| fecha máxima | Define la fecha máxima disponible para la selección. Por defecto no hay restricción |
| minFecha | Define la fecha mínima disponible para la selección. Por defecto no hay restricción |
| número de meses | Determina el número de meses que se muestran simultáneamente en el calendario. El valor predeterminado es 1 |
| mostrarCurrentAtPos | Si el calendario está configurado para mostrar varios meses a la vez, esta opción especifica el número de posición en la que se debe mostrar el mes actual o predeterminado. El valor predeterminado es 0 |
| pasoMeses | Determina cuántos meses hacia adelante o hacia atrás se debe mover la fecha que se muestra en el calendario al hacer clic en el botón de avance o retroceso de tiempo. |
| añoRango | Define el rango de años disponibles para su selección en la lista desplegable agregada usando la opción cambiarAño. De forma predeterminada, esta lista incluye los diez años anteriores, los diez años siguientes y el año actual. |
Al establecer la opción constrainInput en verdadero, puede limitar la entrada de caracteres en un campo de texto solo a aquellos caracteres que se ajusten a un formato estrictamente definido. El conjunto de caracteres permitido está determinado por la configuración de localización comentada anteriormente. Si el widget Datepicker no se ha localizado, puede esperar que los caracteres permitidos solo incluyan números y el carácter de barra diagonal (/).
Usar el valor especificado para la opción constrainInput no significa que el usuario no podrá ingresar una fecha no válida, como 99/99/99, pero sí reduce significativamente la probabilidad de errores. Esta configuración es aún más importante si la opción showOn está configurada en botón, ya que entonces el calendario emergente no se abrirá automáticamente cuando el campo de entrada reciba el foco.
Los usuarios generalmente están dispuestos a utilizar un calendario para seleccionar una fecha, pero deben verlo para hacerlo. Si el calendario no se muestra en la pantalla, no todos los usuarios se darán cuenta de que para abrir el calendario basta con hacer clic en un botón. Cualquier opción que le dé al usuario para ingresar directamente una fecha en un campo de texto aumenta la probabilidad de que el formato de la fecha que ingresa sea incorrecto. A continuación se proporciona un ejemplo del uso de la opción constrainInput:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( constrainInput: true, minDate: "-3", maxDate: "+ 1" )); ));
Aquí, el valor verdadero se asigna a la opción constrainInput solo para mayor claridad, ya que es el valor predeterminado para esta opción. Las dos opciones restantes le permiten limitar el rango de fechas disponibles para la selección a una fecha mínima y máxima.
Al igual que con la opción defaultDate analizada anteriormente, los valores de las opciones minDate y maxDate pueden ser nulos (una fecha indefinida), un objeto de fecha de JavaScript, una cantidad de días y una cadena de fecha relativa. En este ejemplo, se selecciona la representación numérica para indicar el número de días relativos a la fecha actual.
En la figura puedes ver que Datepicker deshabilita las celdas del calendario que no son seleccionables:
Tenga en cuenta que los botones del mes se desactivan automáticamente si no son necesarios. Estos botones están ubicados en la parte superior izquierda y derecha del calendario y le permiten pasar rápidamente al mes anterior o siguiente. Como se muestra en la figura, todas las fechas seleccionables pertenecen al mes actual y, por lo tanto, ambos botones están deshabilitados. En tales situaciones, estos botones se pueden ocultar por completo si es necesario configurando la opción hideIfNoPrevNext en verdadero.
El valor minDate no tiene que ser en el pasado y el valor maxDate en el futuro, ni tienen que ser ambos valores al mismo tiempo. Para permitir al usuario seleccionar fechas de un rango precedido por algún período "preparatorio", puede configurar la opción minDate en un valor en el futuro, evitando así que el usuario seleccione fechas dentro de ese período, como se muestra en el siguiente ejemplo. :
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( minDate: "+4" )); ))
En este ejemplo, especificamos que el usuario no debería poder seleccionar fechas anteriores a 4 días después de la fecha actual. La opción maxDate no está definida, lo que significa que el usuario podrá seleccionar cualquier fecha después del "período de retraso" especificado. El resultado se muestra en la figura:
Tenga en cuenta que el botón del mes siguiente está habilitado en esta situación, mientras que el botón del mes anterior está deshabilitado (debido a la falta de fechas pasadas disponibles para que el usuario las seleccione).
Las opciones minDate y maxDate funcionan junto con la opción defaultDate, lo que significa que vincular rangos a la fecha actual es opcional.
Crea un calendario que muestre varios meses a la vezEl widget Datepicker le permite establecer la cantidad de meses que deben mostrarse simultáneamente en el calendario usando la opción numberOfMonths. Esto se puede hacer especificando el número requerido de meses o una matriz de dos elementos que definan las dimensiones de la cuadrícula del calendario mensual.
El siguiente ejemplo implementa un enfoque basado en matrices, que considero más adecuado para los widgets Datepicker integrados, ya que el tamaño de la cuadrícula suele ser demasiado grande para los widgets emergentes (volveremos a esto más adelante).
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( numberOfMonths: )); ));
Este ejemplo especifica una cuadrícula de calendario que tiene un mes de alto y tres meses de ancho. El resultado se muestra en la figura:
Una matriz de dos elementos equivale al valor numérico 3. Si el valor de la opción numberOfMonths se especifica como un número, el widget muestra el número correspondiente de meses en una fila.
La razón por la que rara vez uso este enfoque cuando trabajo con calendarios emergentes es que con cuadrículas grandes, hay que hacer ciertas suposiciones sobre la ventana del navegador y los tamaños de visualización. La ventana del widget emergente Datepicker no es un cuadro de diálogo del sistema operativo. Es un elemento HTML con un estilo inteligente que aparece como parte de un documento HTML. Esto significa que cuando se muestran grandes cuadrículas de calendario en una pantalla pequeña o en una pequeña ventana del navegador, gran parte del resto de la información contenida en el documento aparecerá fuera de la pantalla.
Proporcionar acceso directo a meses y años.En lugar de simplemente mostrar meses y años en el encabezado del calendario, puede proporcionar acceso directo a los períodos de tiempo relevantes mediante listas desplegables. Esta característica proporciona velocidad cuando los usuarios tienen que seleccionar fechas entre una amplia gama de fechas posibles y se implementa mediante las opciones changeMonth y changeYear.
Establecer cualquiera de estas opciones en verdadero habilitará la lista desplegable correspondiente y podrá controlar de forma independiente si las listas están habilitadas. A continuación se ofrece un ejemplo del uso de estas opciones:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( cambioMes: verdadero, cambioAño: verdadero, rangoaño: "-1:+ 2" )); ));
En este escenario, ambas listas desplegables están habilitadas. Además, la opción YearRange se utiliza para limitar el rango de años entre los cuales el usuario puede realizar la transición. El rango requerido se especifica utilizando el valor "-1:+2", lo que significa que el calendario permite al usuario retroceder un año y avanzar dos años desde el año actual.
Las listas desplegables y el rango de años especificado se muestran en la figura:
Al definir rangos de años, puede utilizar la opción YearRange para especificar los años reales. Entonces, en este ejemplo, podría especificar el valor: "2012:2015".
Controlar la apariencia del widget DatepickerHay una serie de propiedades que le permiten personalizar la apariencia del widget Datepicker cuando se muestra al usuario. Para tareas comunes de selección de fechas, puede contentarse con la apariencia predeterminada del calendario con la que ya está familiarizado por los ejemplos anteriores, pero la capacidad de personalizar la apariencia para satisfacer las necesidades de su aplicación web específica es extremadamente útil.
Las propiedades que le permiten cambiar la apariencia del widget Datepicker se muestran en la siguiente tabla:
| añadir texto | Especifica el texto de información sobre herramientas que contiene información adicional, como una explicación del formato de fecha, que se insertará en el documento después del elemento de entrada. |
| cerrarTexto | Establece el texto para el botón de cierre del calendario que aparece en la barra de botones auxiliares cuando está habilitado. El valor predeterminado es "Cerrar" |
| texto actual | Establece el texto para el botón de regreso al mes actual que aparece en la barra de botones auxiliares cuando está habilitado. El valor predeterminado es "Hoy" |
| duración | Establece la velocidad o duración de la animación especificada por la opción showAnim. El valor predeterminado es normal |
| ir aActual | Si esta opción es verdadera, el botón Hoy que se encuentra en la barra de botones auxiliares, si está habilitado, volverá a la fecha seleccionada en lugar de a la fecha actual. El valor predeterminado es falso |
| seleccioneOtroMeses | Si esta opción es verdadera, las fechas que se muestran como resultado de configurar la opción showOtherMonths en verdadera estarán disponibles para su selección. |
| mostrarAnim | Determina el tipo de animación utilizada para mostrar y ocultar calendarios emergentes. El valor predeterminado es falso |
| mostrarBotónPanel | Si esta opción es verdadera, el calendario mostrará un panel auxiliar con botones que permiten al usuario navegar a la fecha actual y (si se utiliza un widget emergente) cerrar el calendario. El valor predeterminado es falso |
| mostrar opciones | Establece las opciones de animación especificadas por la opción showAnim. |
| mostrarOtroMeses | Si esta opción es verdadera, los campos vacíos en la cuadrícula del calendario se completarán con fechas de los meses anteriores y posteriores. El valor predeterminado es falso |
| mostrarsemana | Si esta opción es verdadera, el calendario mostrará una columna con los números de las semanas. El valor predeterminado es falso |
| encabezado de semana | Especifica el título de la columna del calendario con los números de semana habilitados por la opción showWeek. El valor predeterminado es "miércoles" |
En algunas aplicaciones, es importante saber el número de la semana del año en la que cae una fecha determinada. Por ejemplo, esto es necesario en muchos programas de contabilidad. En el widget Datepicker, usted controla la visualización de la información de la semana usando las opciones showWeek y WeekHeader, como se muestra en el siguiente ejemplo:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: true, WeekHeader: "Semana No. )); ) ) ;
Si la opción showWeek es verdadera, se muestra una columna con números de semana en el calendario. El encabezado predeterminado para esta columna es "Semana", pero se puede cambiar usando la opción WeekHeader. El ejemplo muestra la columna de semanas, cuyo nombre cambia a "Semana #":
De forma predeterminada, el calendario solo muestra fechas que caen dentro del mes actual. Esto significa que puede haber celdas vacías en la cuadrícula del calendario. Puede permitir que las celdas vacías se llenen con fechas de los meses anteriores y posteriores configurando la opción showOtherMonths en verdadero, como se muestra en el siguiente ejemplo:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOtherMonths: true )); ));
El resultado se muestra en la siguiente figura. En este caso, las fechas que pertenecen a otros meses estarán disponibles si la opción selectOtherMonths se establece en verdadero:
Establecer la opción showButtonBar en verdadero hace que se agregue una barra de botones adicionales en la parte inferior de la ventana del widget Datepicker. En el caso de un calendario emergente, el panel contiene dos botones: "Hoy" y "Cerrar". El botón Hoy le permite volver a la fecha actual y el botón Cerrar cierra la ventana del calendario. El texto utilizado para estos botones se puede cambiar usando las opciones currentText y closeText.
Si la opción goToCurrent está configurada como verdadera, el calendario volverá a la fecha seleccionada en lugar de a la fecha actual. Esta función es útil si el widget Datepicker está configurado con un valor de opción defaultDate específico. Si el propósito de elegir una fecha está relacionado con eventos pasados o futuros, entonces no siempre es apropiado volver a la fecha actual. A continuación se proporciona un ejemplo correspondiente:
$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showButtonPanel: true, currentText: "Go", gotoCurrent: true, defaultDate : "+1m +1y" )).val("20.12.2014" ));
Tenga en cuenta que el uso de la opción goToCurrent hace que al presionar el botón salte a la fecha seleccionada. En este ejemplo, la fecha seleccionada es el atributo de valor del elemento de entrada, pero si el usuario selecciona una fecha diferente y luego vuelve a abrir el calendario, al hacer clic en el botón el calendario volverá a la fecha que el usuario seleccionó en lugar de la fecha que usted especificó.
Los métodos admitidos por el widget Datepicker se enumeran en la siguiente tabla:
| selector de fecha("destruir") | Elimina completamente la funcionalidad del widget Datepicker del elemento base |
| selector de fecha("deshabilitar") | Pausa el widget Datepicker para el elemento base. |
| selector de fecha("habilitar") | Reanuda un widget Datepicker previamente pausado para el elemento subyacente |
| selector de fecha("opción", opciones) | Le permite obtener o establecer los valores de una o más opciones del widget Datepicker |
| selector de fecha ("está deshabilitado") | Devuelve verdadero si el widget Datepicker está deshabilitado |
| selector de fecha("ocultar") | Oculta el calendario emergente si está visible. |
| selector de fecha("mostrar") | Muestra un calendario emergente si es invisible. |
| selector de fecha("actualizar") | Actualiza el calendario para reflejar los cambios realizados en el elemento subyacente. |
| selector de fecha("obtenerFecha") | Obtiene la fecha seleccionada en el calendario. |
| selector de fecha("establecerFecha", fecha) | Establece el valor especificado como la fecha del calendario seleccionada |
Las veces más comunes que uso los métodos getDate y setDate son cuando quiero brindarles a los usuarios la posibilidad de seleccionar rangos de fechas completos usando múltiples widgets Datepicker. En tales situaciones, prefiero no mostrar las fechas seleccionadas en los campos de texto y mostrar solo el número de días entre las fechas límite especificadas. A continuación se proporciona un ejemplo correspondiente:
Etiqueta jQuery UI (margen: 12px) entrada (ancho: 200px; alineación de texto: izquierda) #wrapper > * (flotante: izquierda) #resultado (margen: automático; relleno: 10px; ancho: 200px; claro: izquierda) $( function() ( $("#resultado").hide(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker(( minDate: "-7d", maxDate: "+7d", onSelect: function(date, datepicker) ( if (datepicker.id == "dateStart") ( $("#dateEnd").datepicker("setDate", date). datepicker("enable").datepicker("option", "minDate", date) ) if (!$("#dateEnd").datepicker("isDisabled")) ( var startDate = $("#dateStart"). datepicker("getDate"); var endDate = $("#dateEnd").datepicker("getDate"); ; ) )).filter("#dateEnd").datepicker("deshabilitar" )); Inicio: Fin: Número de días:
Este ejemplo crea dos calendarios, uno de los cuales está en estado deshabilitado inmediatamente después de cargar el documento. Para responder a la selección de fechas por parte del usuario, se utiliza el evento onSelect (del que hablaremos con más detalle más adelante).
Una vez que el usuario selecciona una fecha en el primer calendario, usamos el método setDate para preparar el segundo calendario y el método getDate para recuperar fechas de ambos calendarios y luego calcular la diferencia en días entre la primera y la segunda fecha (para simplificar, usamos supongamos que ambas fechas son del mismo y del mismo mes). La vista del documento en la ventana del navegador se muestra en la figura:
Como todos los widgets de jQuery UI, el widget Datepicker admite un conjunto de eventos que le permiten recibir notificaciones sobre cambios importantes en el estado de la aplicación. Estos eventos se muestran en la siguiente tabla:
No volveré a demostrar cómo funciona el método onSelect porque ya se ha utilizado en un par de ejemplos, incluido el analizado en la sección anterior. Lo único que quiero señalar es que los argumentos pasados al controlador de eventos son representaciones de cadena de la fecha seleccionada y la instancia de Datepicker que generó el evento.
El evento onChangeMonth le permite responder al evento que ocurre cuando el usuario selecciona un mes o año diferente, ya sea a través de listas desplegables habilitadas mediante el uso de las opciones changeMonth y changeYear o los botones de página de mes.
Usando el método onClose, puede responder al cierre de un calendario emergente. Este evento se activa incluso si el usuario no ha seleccionado una fecha en el calendario. Los argumentos del controlador de eventos son una representación de cadena de la fecha (o una cadena vacía si el usuario cerró la ventana sin realizar una selección) y la instancia de Datepicker que generó el evento.
Descripción: Desde una ventana emergente o calendario en línea para seleccionar una fecha.
Nueva versión: 1.0
JQuery UI Datepicker Seleccione una fecha para agregar altura de página y personalizar el complemento. Puede personalizar el formato de fecha y el idioma, limitar el rango de fechas que seleccione, agregar botones y otras opciones de navegación.
De forma predeterminada, cuando un campo de texto asociado tiene el foco, aparece una pequeña superposición de selector de fecha de apertura. Para un calendario en línea, simplemente seleccione la fecha adjunta al DIV o intervalo.
interacción con el tecladoCuando el selector de fecha está abierto, los siguientes comandos de teclado están disponibles:
- PÁGINA ARRIBA: Ir al mes anterior.
- PÁGINA ABAJO: Pasar al mes siguiente.
- CTRL + RE PÁG: Ir al año anterior.
- CTRL + AV PÁG: Ir al año siguiente.
- CTRL + INICIO: Mover el mes actual. Si el selector de fecha está cerrado, está abierto.
- CTRL + IZQUIERDA: Ir al día.
- CTRL + DERECHA: Ir al día siguiente.
- CTRL + ARRIBA: Ir a la semana anterior.
- CTRL + ABAJO: Ir a la próxima semana.
- ENTER: Seleccione la fecha de enfoque.
- CTRL + FIN: cierra el selector de fecha y borra la fecha.
- ESCAPE: Fecha de cierre de grifo, sin opción.
Cambie la configuración predeterminada para todos los selectores de fechas.
20/08/2012 Romchik
Buen día. El otro día encontré un problema: el usuario debe especificar una fecha en un formato determinado en la entrada. Sin devanarme los sesos por mucho tiempo, decidí asegurarme de que cuando hiciera clic en la entrada, apareciera un calendario. Esto no es difícil de implementar, pero ¿por qué? Si hay un maravilloso widget de calendario jQuery: selector de fechas. A continuación hablaremos sobre la instalación, configuración y conexión de datepicker.
Primero, daré un ejemplo claro de lo que quiero hacer:
Bueno, está claro que después de seleccionar una fecha, el calendario desaparece y la fecha seleccionada aparece en el campo de texto.
Comencemos la implementación.
Vaya al sitio web oficial de jQueryUI. Para evitar descargar nada innecesario, haga clic en "Deseleccionar todos los componentes"
Y seleccione “Núcleo”:
Eso es básicamente todo. Pero este widget tiene pantallas (temas) preestablecidas.
En la esquina superior derecha puede seleccionar un tema adecuado, seleccionar la versión del widget y hacer clic en "Descargar":
En el siguiente paso, descomprima el archivo.
Acordemos inmediatamente la estructura de nuestra página:
Ahora colocamos los archivos jquery-1.8.0.min.js y jquery-ui-1.8.23.custom.min.js del archivo descargado en la carpeta js. Ahora colocamos la carpeta con el nombre del tema para datepicker (en mi caso es ui-lightness) de la carpeta css del archivo descargado a la carpeta css de nuestra página. Esto completa la instalación del widget de calendario jQuery Datepicker.
Comencemos a conectar Datepicker. Como ya dije, quiero llamar al calendario al hacer clic en un campo de texto. Agreguemos id=”datepicker” a nuestra entrada para que podamos acceder a ella fácilmente.
Ahora escribamos un pequeño script jQuery que llamará al calendario cuando hagas clic en este campo de prueba:
$(función())( $("#datepicker").datepicker(); ));
Guardamos y comprobamos.
Configurar un widget de calendario usando jQuery Datepicker.Lo primero que configuraremos es un tema para nuestro calendario. A continuación daré una tabla con el nombre del tema para Datepicker y su visualización:
| ligereza de la interfaz de usuario | |
| oscuridad de la interfaz de usuario | |
| Suavidad | |
| Comenzar | |
| Redmond | |
| Soleado | |
| Nublado | |
| La Rana | |
| Película | |
| Molinillo de pimienta | |
| Berenjena | |
| colmena oscura | |
| Cupertino | |
| Calle Sur | |
| bombardeo | |
| Humanidad | |
| chivatos calientes | |
| excitar la bicicleta | |
| vader | |
| punto amor | |
| Calzo de menta | |
| Té Negro | |
| Trontástico | |
| Monedero ostentoso |
Como puede ver, hay suficientes temas para elegir el correcto, pero si por alguna razón no ha encontrado dicho tema, puede cambiar fácilmente uno de los estándar cambiando el archivo de estilo del selector de fechas.
La configuración del selector de fecha no termina ahí, y al llamar a la función del selector de fecha podemos pasar parámetros adicionales:
| Parámetro | Descripción | Ejemplo |
| desactivar: verdadero (falso) Predeterminado: falso | Activar o desactivar el selector de fechas | $(“.selector”).datepicker(( deshabilitado: verdadero )); |
| campoalt Predeterminado: vacío | Especifica el selector del elemento que se actualizará. | $(“.selector”).datepicker(( altField: “#actualDate” )); |
| formato alt Predeterminado: vacío | dateFormat: formato de fecha que se utilizará para altField | $(“.selector”).datepicker(( altFormat: “aa-mm-dd” )); |
| agregarTex Predeterminado: vacío | Texto que se mostrará después de cada campo de fecha | $(“.selector”).datepicker(( appendText: “(aaaa-mm-dd)” )); |
| tamaño automático: verdadero (falso) Predeterminado: falso | Elemento de tamaño automático | $(“.selector”).datepicker(( autoSize: verdadero )); |
| formato de fecha: Predeterminado: dd/mm/aa En la siguiente tabla mostraré qué valores puede tomar. | Especifica el formato de fecha. | $(“.selector”).datepicker(( dateFormat: “aa-mm-dd” )); |
| nombres del día Por defecto ["Domingo Lunes Martes Miércoles Jueves Viernes Sábado"] | Nombres completos de los días de la semana. | $(“.selector”).datepicker(( dayNames: [“lunes”, “martes”, “miércoles”, “jueves”, “viernes”, “sábado”, “domingo”])); |
| díaNombresMin Por defecto: ["Do", "Lu", "Tu", "Nosotros", "Ju", "Vi", "Sa"] | Abreviatura de días de la semana. | $(“.selector”).datepicker(( dayNamesMin: [“lunes”,”mar”,”miércoles”,”jueves”,”viernes”,”sáb”,”domingo”])); |
| díaNombresCorto Por defecto: ["Dom LUN Mar MIE JUE VIE SAB"] | Nombres abreviados de los días de la semana. | $(“.selector”).datepicker(( dayNamesShort: [“lunes”, “martes”, “miércoles”, “jueves”, “viernes”, “sábado”, “domingo”])); |
| fecha predeterminada Predeterminado: vacío Utiliza parámetros dateFormat como parámetros | Especifica la fecha predeterminada | $(“.selector”).datepicker(( fecha predeterminada: +7 )); |
| mesNombres Por defecto: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"] | Nombres completos de los meses. | $(“.selector”).datepicker(( nombres de mes: [“enero”, “febrero”, “marzo”, “abril”, “mayo”, “junio”, “julio”, “agosto”, “septiembre”, "Octubre Noviembre Diciembre"] )); |
| mesNombresCortos Por defecto ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"] | Nombre abreviado de los meses. | $(“.selector”).datepicker(( MonthNamesShort: [“Jan”, “Feb”, “Mar”, “Abr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, "Oct", "Nov", "Dic"] )); |
Aquí he proporcionado sólo los parámetros básicos que pueden resultarle útiles. Si desea ver la lista completa de parámetros, vaya a la documentación oficial.
Ahora veamos los valores que toma el parámetro dateFormat
Eso es todo ahora.
Analizamos la instalación, conexión y configuración de uno de los maravillosos widgets de jQuery: el widget de calendario del selector de fechas.
Espero que te haya gustado el artículo. Si tienes alguna pregunta, escribe en los comentarios.
Y con esto me despido de vosotros y del exitoso desarrollo web.