Latest web development tutorials

jQuery UI API - el miembro selector de fechas (selector de fechas Widget)

categoría

Los widgets (widgets)

uso

Descripción: En el cuadro de pop-up o un calendario en línea para seleccionar una fecha.

Nueva Versión: 1.0

jQuery UI fecha selector (selector de fechas) Seleccione la fecha para agregar altura a la página para configurar el plug-in. Puede personalizar el formato y el lenguaje fecha, restringir el intervalo de fechas seleccionable, añadir botones y otras opciones de navegación.

De forma predeterminada, cuando el foco del campo de texto asociado, en una fecha abierta selector pequeña superposición. Para un calendario en línea, sólo tiene que seleccionar la fecha se une a la div o tramo.

interacción con el teclado

Cuando el selector de fechas está abierto, los siguientes comandos del teclado:

  • PÁG: mover con el mes anterior.
  • PÁG: Ir al siguiente mes.
  • CTRL + RE PÁG: Mover el año anterior.
  • CTRL + AV PÁG: Sacar al próximo año.
  • CTRL + INICIO: Mueva el mes en curso. Si el selector de fecha se cierra se abre.
  • CTRL + IZQUIERDA: Ir al día.
  • CTRL + DERECHA: Ir al día siguiente.
  • CTRL + ARRIBA: mover a la semana anterior.
  • CTRL + ABAJO: Mover a la próxima semana.
  • ENTER: Seleccionar la fecha de enfoque.
  • CTRL + FIN: Cerrar el selector de fechas y desactive la fecha.
  • ESCAPE: Cerrar el selector de fechas, sin opción alguna.

Características útiles

$ .datepicker.setDefaults (Ajustes)

Cambiar la configuración predeterminada para todos selector de fecha.

Utilice option() método para cambiar la configuración de casos individuales.

Ejemplos de código:

Fijado todo el selector de fecha o haga clic en el icono se abre cuando el foco. 

$ .datepicker.setDefaults ({
  showOn: "ambos",
  buttonImageOnly: true,
  ButtonImage: "calendar.gif",
  buttonText: "Calendario"
});

Establecer todos selector de fecha tiene texto en francés. 

$ .datepicker.setDefaults ($ .datepicker.regional [ "Fr"]);

$ .datepicker.formatDate (Formato, la fecha, la configuración)

Formateo de una fecha a un valor de cadena con el formato especificado.

Formato puede ser las siguientes combinaciones:

  • d - día del mes (sin ceros a la izquierda)
  • dd - día del mes (dos dígitos)
  • o - el día del año (sin ceros a la izquierda)
  • oo - el día del año (tres dígitos)
  • Día corto nombre - D
  • Nombre largo día - DD
  • m - los primeros meses del año (sin ceros a la izquierda)
  • mm - los primeros meses del año (dos dígitos)
  • nombre corto del mes - M
  • Mes nombre largo - MM
  • y - Año (dos dígitos)
  • yy - Año (cuatro dígitos)
  • @ - Unix marca de tiempo (ms desde 01/01/1970)
  • ! - Ventanas Watch (100 ns desde 01/01/0001)
  • '...' - Texto
  • '' - Las comillas simples
  • Otros - texto

También hay algunos $.datepicker formato de fecha estándar predefinido:

  • ATOM - 'aa-mm-dd' (y RFC 3339 / ISO 8601 misma)
  • COOKIE - 'D, M dd yy'
  • ISO_8601 - 'aa-mm-dd'
  • RFC_822 - 'D, D M' (consulte RFC 822)
  • RFC_850 - 'DD, DD-Mi' (consulte RFC 850)
  • RFC_1036 - 'D, D M' (consulte RFC 1036)
  • RFC_1123 - 'D, d M yy' (véase RFC 1123)
  • RFC_2822 - 'D, d M yy' (véase RFC 2822)
  • RSS - 'D, d M y' (igual que la RFC 822)
  • GARRAPATAS - '!'
  • TIMESTAMP - '@'
  • W3C - 'aa-mm-dd' (la misma que la norma ISO 8601)
Ejemplos de código:

formato ISO para mostrar la fecha. Producir "2007-01-26". 

$ .datepicker.formatDate ( "AA-MM-dd", new Date (2007, 1 - 1, 26));

Francés el que se amplía el formato para mostrar la fecha. Producir "Sábado, 14 de Julio de 2007". 

$ .datepicker.formatDate ( "DD, MM d, yy", new Date (2007, 7 - 1, 14), {
  dayNamesShort: $ .datepicker.regional [ "fr"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "FR"], .dayNames
  monthNamesShort: $ .datepicker.regional [ "fr"] .monthNamesShort,
  monthNames: $ .datepicker.regional [ "FR"] .monthNames
});

$ .datepicker.parseDate (Formato, el valor, la configuración)

Extraer un valor de cadena de un formato de fecha especificado.

Formato puede ser las siguientes combinaciones:

  • d - día del mes (sin ceros a la izquierda)
  • dd - día del mes (dos dígitos)
  • o - el día del año (sin ceros a la izquierda)
  • oo - el día del año (tres dígitos)
  • D - nombre corto de la semana
  • DD - semana largo nombrar unos pocos
  • m - los primeros meses del año (sin ceros a la izquierda)
  • mm - los primeros meses del año (dos dígitos)
  • nombre corto del mes - M
  • Mes nombre largo - MM
  • y - Año (dos dígitos)
  • yy - Año (cuatro dígitos)
  • @ - Unix marca de tiempo (ms desde 01/01/1970)
  • ! - Ventanas Watch (100 ns desde 01/01/0001)
  • '...' - Texto
  • '' - Las comillas simples
  • Otros - texto

Algunas excepciones pueden ser lanzadas:

  • 'Los argumentos inválidos' - o si el formato es nulo se lanza esta excepción.
  • "Falta el número en la posición nn '- si el formato de visualización de un valor no encontrado Esta excepción se produce.
  • 'Nombre desconocido en la posición nn' - si el formato no se encuentra un par de semanas o nombres de los meses nombres se lanza esta excepción.
  • 'Inesperado literal en la posición nn' - si el valor de un formato de texto que no se encuentra presente excepción.
  • "Fecha no válida '- la fecha no es válida si se lanza esta excepción, como '31 / 02/2007'.
Ejemplos de código:

Extraer una fecha en formato ISO. 

$ .datepicker.parseDate ( "AA-MM-dd", "2007-01-26");

La extracción de un formato de fecha que los franceses extendieron. 

$ .datepicker.parseDate ( "DD, MM d, aa", "Sábado, 14 de Julio de 2007", {
  shortYearCuroff: 20,
  dayNamesShort: $ .datepicker.regional [ "fr"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "FR"], .dayNames
  monthNamesShort: $ .datepicker.regional [ "fr"] .monthNamesShort,
  monthNames: $ .datepicker.regional [ "FR"] .monthNames
});

$ .datepicker.iso8601Week (Fecha)

La determinación de una fecha determinada de las primeras semanas del año: 1-53.

Esta función utiliza la definición de la norma ISO 8601 de una semana: una semana a partir del lunes, la primera semana de cada año contiene 4 de enero. Esto significa que el año anterior puede incluir hasta tres días en la primera semana del año, el año puede contener hasta tres días en la última semana del año anterior.

Esta función es calculateWeek implementación por defecto.

Ejemplos de código:

Encuentra la fecha de las primeras semanas del año. 

$ .datepicker.iso8601Week (New Date (2007, 1 - 1, 26));

$ .datepicker.noWeekends

Configuración de tal función beforeShowDay, la prevención de la selección del fin de semana.

Podemos beforeShowDay proporcionar opciones noWeekends() función se utiliza para el cálculo de todos los que trabajan para proporcionar un true / false gama de valores que se utilizan para indicar la fecha es seleccionable.

Ejemplos de código:

Establecer DatePicker, dejar que los fines de semana opcional. 

$ ( "#datepicker") .datepicker ({
  beforeShowDay: $ .datepicker.noWeekends
});

límite

El selector de fechas proporciona para atender a diferentes idiomas y formatos de fecha soportados por el contenido localizado. Cada código de idioma localizado que figura en el apéndice después de que el nombre del archivo, por ejemplo, el francés es jquery.ui.datepicker-fr.js . archivos de localización requeridos deben ser incluidos en la parte posterior del código principal del selector de fecha. Cada archivos localizados para añadir a su propio conjunto de juego de marcadores de disponible, todos los casos, se aplican automáticamente estos ajustes a los valores predeterminados.

$.datepicker.regional Propiedad se cumple una serie de localizado en el código de la lengua como un pre, pre-default es "" , expresó en Inglés. Cada entrada es un objeto con las siguientes propiedades: closeText , prevText , nextText , currentText , monthNames , monthNamesShort , dayNames , dayNamesShort , dayNamesMin , weekHeader , dateFormat , firstDay , isRTL , showMonthAfterYear y yearSuffix .

Puede restaurar debajo del código de localización por defecto:

$.datepicker.setDefaults( $.datepicker.regional[ "" ] );

Puede anular la selección de fecha a una ubicación específica siguiendo los códigos:

$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

tematización

miembro de un selector de fechas (selector de fechas Widget) usando framework jQuery UI CSS para definir la apariencia de su estilo. Si es necesario utilizar el selector de fechas estilo especificado, puede utilizar el siguiente nombre de clase CSS:

  • ui-datepicker : selector de fechas recipiente exterior. Si el selector de fecha es en línea, los elementos son, además, provistos de una ui-datepicker-inline , clase. Si los isRTL opciones, este elemento será, además, con una ui-datepicker-rtl , clase.
    • ui-datepicker-header : contenedor de cabeza selector de fechas.
      • ui-datepicker-prev : control se utiliza para seleccionar el mes anterior.
      • ui-datepicker-next : control se utiliza para seleccionar el mes siguiente.
      • ui-datepicker-title : título selector de fecha contiene el mes y el año de contenedor.
        • ui-datepicker-month : el mes visualización de texto, si se establece changeMonth la opción <select> elemento.
        • ui-datepicker-year : Texto en la pantalla, si se establece changeYear la opción <select> elemento.
    • ui-datepicker-calendar : contiene la forma de calendario.
      • ui-datepicker-week-end : células de fin de semana. : Las células que contienen días de fin de semana.
      • ui-datepicker-other-month : introducir en un mes, pero no el mes en curso el número de días las células.
      • ui-datepicker-unselectable : el usuario no puede seleccionar la celda.
      • ui-datepicker-current-day : seleccionado celda de fecha.
      • ui-datepicker-today : celda de fecha de hoy.
    • ui-datepicker-buttonpane : Al establecer showButtonPanel utilizar el panel de botones (buttonpane) cuando la opción.
      • ui-datepicker-current : seleccionar el botón correspondiente a la fecha de hoy.

Si numberOfMonths opción para visualizar múltiples meses, usar alguna clase extra:

  • ui-datepicker-multi : el mes partes selector de fecha de la capa más externa del recipiente. Este elemento se mostrará de acuerdo con el número del mes con adicional ui-datepicker-multi-2 , ui-datepicker-multi-3 o ui-datepicker-multi-4 , nombre de la clase.
    • ui-datepicker-group : agrupar en un solo selector. Este elemento basado en su posición en el paquete con adicional ui-datepicker-group-first , ui-datepicker-group-middle o ui-datepicker-group-last , nombre de la clase.

confiar

información adicional

  • La parte funcional requiere un poco de CSS, de lo contrario no funcionará. Si crea un tema personalizado, utilice el archivo CSS widget de especificado como un punto de partida.
  • Los componentes para manipular mediante programación el valor del elemento, de modo que cuando el valor de los cambios de elementos no desencadenan la nativas change eventos.
  • No es compatible con <input type="date"> Crear un selector de fecha, porque va a causar un conflicto con el selector de interfaz de usuario local.

Ejemplos

Un simple selector de fechas jQuery UI (selector de fechas). 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> miembro de selector de fecha (selector de fechas Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Cuerpo>
 
<Div id = "selector de fechas"> </ div>
 
<Script>
$ ( "#datepicker") .datepicker ();
</ Script>
 
</ Body>
</ Html>