jQuery UI ejemplo - el selector de fechas (selector de fechas)
En el cuadro emergente o un calendario en línea para seleccionar una fecha.
Para más detalles sobre los componentes datepicker, consulte la documentación de la API miembro de selector de fecha (el selector de fechas el widget) .
La función predeterminada
El selector de fechas (selector de fechas) está ligada a una forma estándar en el campo de entrada. Mover el foco en la entrada (o utilice la tecla de tabulación para hacer clic) para abrir un calendario interactivo en una pequeña superposición. Elija una fecha, haga clic en cualquier lugar de la página (cuadro de entrada deja de estar seleccionado), o haga clic en la tecla Esc para cerrar. Si selecciona una fecha, las votaciones se muestra como el valor de la entrada.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - La función por defecto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = "selector de fechas"> </ p>
</ Body>
</ Html>
animación
Utilizar diferentes animaciones al abrir o cerrar el selector de fechas. Seleccione una película desde el cuadro desplegable y, a continuación, haga clic en el cuadro para ver su efecto. Puede utilizar cualquiera de animación en tres estándar, efectos especiales, o utilizar cualquiera de una interfaz de usuario.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
$ ( "#anim") .Cambiar (Function () {
$ ( "#datepicker") .datepicker ( "Opción", "showAnim", $ (this) .val ());
});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = tamaño "planificador de evento" = "30"> </ p>
<P> Animación: <br>
<Select id = "anim">
<Option value = "espectáculo"> Mostrar (por defecto) </ option>
<Option value = "slideDown"> diapositivas </ option>
<Option value = "fadeIn"> Fundido </ option>
<Option value = "ciegos"> Ciegos (persianas UI efectos) </ option>
<Opción value = "rebote"> Bounce (IU efectos de rebote) </ option>
<Option value = "clip"> Clip (efectos de edición IU) </ option>
<Option value = "drop"> gota (IU efectos aterrizó) </ option>
<Option value = "doblar"> Doble (efectos de interfaz de usuario doblado) </ option>
<Option value = "slide"> Slide (IU efectos de deslizamiento) </ option>
<Option value = ""> n </ option>
</ Select>
</ P>
</ Body>
</ Html>
Otros meses siguientes a la fecha
planificador de evento puede mostrar la fecha suplementario de un mes, estas fechas se pueden establecer en opcional.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - en otros meses siguientes a la fecha </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showOtherMonths: true,
selectOtherMonths: true
});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = "selector de fechas"> </ p>
</ Body>
</ Html>
barra de botones de visualización
Por booleanos showButtonPanel para la selección de visualización de la fecha de hoy un botón de "Hoy" para apagar el calendario muestra una opción de botón "Done". De forma predeterminada, cuando una barra de botones de visualización permitirá a cada botón, pero el botón se puede desactivar a través de las otras opciones. Texto del botón puede ser personalizado.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - Pantalla botón de la barra </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showButtonPanel: true
});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = "selector de fechas"> </ p>
</ Body>
</ Html>
la visualización incorporada
datepicker se anida en la visualización de la página, en lugar de en una capa de cubierta. Simplemente llame a la .datepicker div () puede ser, en lugar de llamar a la entrada.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI selector de fechas (selector de fechas) - visualización incorporada </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Head>
<Cuerpo>
Fecha: <div id = "selector de fechas"> </ div>
</ Body>
</ Html>
Visualizar el menú Mes y Año
cuadro desplegable muestra el mes y el año, en lugar de una exposición estática del título mes / año, es fácil de abarcar un amplio rango de tiempo en la navegación. Añadir un valor booleano changeMonth y changeYear opción.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - Pantalla mes & amp; menú de Año </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
changeMonth: true,
changeYear: true
});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = "selector de fechas"> </ p>
</ Body>
</ Html>
Mostrar varios meses
Configuración numberOfMonths opción es un número entero 2 o un entero mayor que 2, para ser visualizada en la datepicker múltiples meses.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - mostrar varios meses </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
NUMBEROFMONTHS: 3,
showButtonPanel: true
});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = "selector de fechas"> </ p>
</ Body>
</ Html>
Formato de fecha
En una variedad de formas de mostrar las votaciones fecha. Seleccione un formato de fecha en el cuadro desplegable, haga clic en y seleccione una fecha en el cuadro de entrada, ver el formato de fecha de la pantalla seleccionada.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - Formato de fecha </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
$ ( "#format") .Cambiar (Function () {
$ ( "#datepicker") .datepicker ( "Opción", "formatoFecha", $ (this) .val ());
});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = tamaño "planificador de evento" = "30"> </ p>
<P> Opciones de formato: Read
<Select id = "formato">
<Opción value = "dd / mm / aa"> por defecto - mm / dd / aa </ option>
<Opción value = "yy-mm-dd"> ISO 8601 - yy-mm-dd </ option>
<Option value = "d M, y"> Cortos - d M, y </ option>
<Option value = "d MM, y"> Medio - d MM, y </ option>
<Option value = "DD, MM d, yy"> completo - DD, MM d, yy </ option>
<Option value = "& apos; día y apos; apos d &; OF & apos; MM & apos; en el año y apos; yy"> con el texto - 'día' D 'de' MM 'en el año' aa </ option>
</ Select>
</ P>
</ Body>
</ Html>
icono de disparo
Haga clic en el icono situado junto a la caja de entrada para mostrar el selector de fechas. Ajuste selector de fechas se abre (comportamiento por defecto) en el foco, o haga clic en el icono para abrir, o abrir / recibir el foco cuando se hace clic en el icono.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - icono de activación </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showOn: "botón",
ButtonImage: "images / calendar.gif",
buttonImageOnly: true
});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = "selector de fechas"> </ p>
</ Body>
</ Html>
calendario localizada
La localización selector de fechas de calendario idioma y el formato (el valor predeterminado es Inglés Formato / occidental). planificador de evento contiene una función de soporte para lenguajes de lectura de derecha a izquierda, como el árabe y el hebreo.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - calendario localizada </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ($ .datepicker.regional [ "Fr"]);
$ ( "#locale") .Cambiar (Function () {
$ ( "#datepicker") .datepicker ( "Opción",
$ .datepicker.regional [$ (Este) .val ()]);
});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = "selector de fechas"> & nbsp;
<Select id = "locale">
<Option value = "AR"> Árabe (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ option>
<Option value = "zh-TW"> Tradicional China (& # 32321; & # 39636; & # 20013; & # 25991;) </ option>
<Option value = ""> Inglés </ option>
<Opción value = "fr" selected = "selected"> Francés (Fran y ccedil; ais) </ option>
<Option value = "él"> hebreo (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ option>
</ Select> </ p>
</ Body>
</ Html>
Poblar otra caja de entrada
Uso altField y altFormat opciones siempre que seleccione una fecha, la fecha se llenarán de un determinado formato en otro cuadro de entrada. Cuando esta función por la fecha en el procesamiento posterior a usar el ordenador, el usuario se presenta con una fecha fácil de usar.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - poblar otra caja de entrada </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
altField: "#alternate",
altFormat: "DD, MM d, yy"
});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = "selector de fechas"> & nbsp; <input type = "text" id = tamaño "alternativo" = "30"> </ p>
</ Body>
</ Html>
Limitar el intervalo de fechas
Por minDate y maxDate opción limita el rango de fechas seleccionable. Fijar las fechas de inicio y finalización de la fecha real (new Date (2009, 1 - 1, 26)), o una cadena de valor de desplazamiento de hoy (-20), o como un ciclo y unidades ( '+ 1 M + 10D '). Si se establece en una cadena, utilice la 'D' para los días, usando una 'W' representa semanas, usando la 'M' para el mes, utilizando la "Y" es el año.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - limitar el intervalo de fechas </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({MinDate: -20, MaxDate: "+ 1M + 10D"});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = "selector de fechas"> </ p>
</ Body>
</ Html>
Seleccione un intervalo de fechas
Seleccione un intervalo de fechas para la búsqueda.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - Seleccione un intervalo de fechas </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#from") .datepicker ({
defaultDate: "+ 1w",
changeMonth: true,
NUMBEROFMONTHS: 3,
onClose: function (selectedDate) {
$ ( "# Para") .datepicker ( "Opción", "MinDate", selectedDate);
}
});
$ ( "# Para") .datepicker ({
defaultDate: "+ 1w",
changeMonth: true,
NUMBEROFMONTHS: 3,
onClose: function (selectedDate) {
$ ( "#from") .datepicker ( "Opción", "MaxDate", selectedDate);
}
});
});
</ Script>
</ Head>
<Cuerpo>
<Label for = "de"> de </ label>
<Input type = "text" id = "de" name = "de">
<Label for = "a"> a </ label>
<Input type = "text" id = "a" name = "en">
</ Body>
</ Html>
La Semana de la feria del año
planificador de evento puede mostrar las primeras semanas del año. El valor por defecto se calcula de acuerdo con la norma ISO 8601 Definición: La semana que comienza el lunes, la primera semana del año que contiene el primer jueves de. Esto significa que en un año y puede ser otro par de días de la semana.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI fecha selector (selector de fechas) - mostrar primeras semanas del año </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showWeek: true,
FirstDay: 1
});
});
</ Script>
</ Head>
<Cuerpo>
<P> Fecha: <input type = "text" id = "selector de fechas"> </ p>
</ Body>
</ Html>