Pikaday / Pikaday

Posted by admin Articles

Un refrescante JavaScript Datepicker

  • Ligero (menos de 5kb minificado y gzipped)
  • Sin dependencias (pero juega bien con Moment.js)
  • Clases CSS modulares para una fácil estilización

Prueba la demo de Pikaday →

¿Listo para producción? Desde la versión 1.0.0 Pikaday es estable y se utiliza en producción. Sin embargo, si encuentras errores o tienes peticiones de características, por favor, envíalas al issue tracker de GitHub.Vea también el registro de cambios

Instalación

Puede instalar Pikaday como un paquete NPM:

npm install pikaday

O enlazar directamente con el CDN:

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

Estilos

También tendrá que incluir el archivo CSS de Pikaday. Este paso depende de cómo se instaló Pikaday. O bien importar desde NPM:

@import './node_modules/pikaday/css/pikaday.css';

O enlazar con el CDN:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

Uso

Pikaday puede estar ligado a un campo de entrada:

<input type="text">

Agrega el JavaScript al final de tu documento:

<script src="pikaday.js"></script><script> var picker = new Pikaday({ field: document.getElementById('datepicker') });</script>

Si estás usando jQuery asegúrate de pasar sólo el primer elemento:

var picker = new Pikaday({ field: $('#datepicker') });

Si la instancia de Pikaday no está vinculada a un campo, puede añadir el elemento en cualquier lugar:

var field = document.getElementById('datepicker');var picker = new Pikaday({ onSelect: function(date) { field.value = picker.toString(); }});field.parentNode.insertBefore(picker.el, field.nextSibling);

Formateo

Por defecto, las fechas se formatean y analizan utilizando el objeto Date de JavaScript estándar.Si Moment.js está disponible en el ámbito, se utilizará para formatear y analizar los valores de entrada. Puede pasar una opción adicional format a la configuración que se pasará al constructor moment.Vea el ejemplo moment.js para una versión completa.

<input type="text" value="9 Oct 2014"><script src="moment.js"></script><script src="pikaday.js"></script><script> var picker = new Pikaday({ field: document.getElementById('datepicker'), format: 'D MMM YYYY', onSelect: function() { console.log(this.getMoment().format('Do MMMM YYYY')); } });</script>

Para un formateo más avanzado y flexible puedes pasar tu propia función toString a la configuración que se utilizará para formatear el objeto fecha.Esta función tiene la siguiente firma:

toString(date, format = 'YYYY-MM-DD')

Deberás devolver una cadena desde ella.

Ten cuidado, sin embargo. Si la cadena formateada que devuelve no puede ser correctamente analizada por el método Date.parse (o por moment si está disponible), entonces debe proporcionar su propia función parse en la configuración. A esta función se le pasará la cadena formateada y el formato:

parse(dateString, format = 'YYYY-MM-DD')

var picker = new Pikaday({ field: document.getElementById('datepicker'), format: 'D/M/YYYY', toString(date, format) { // you should do formatting based on the passed format, // but we will just return 'D/M/YYYY' for simplicity const day = date.getDate(); const month = date.getMonth() + 1; const year = date.getFullYear(); return `${day}/${month}/${year}`; }, parse(dateString, format) { // dateString is the result of `toString` method const parts = dateString.split('/'); const day = parseInt(parts, 10); const month = parseInt(parts, 10) - 1; const year = parseInt(parts, 10); return new Date(year, month, day); }});

Configuración

Como demuestran los ejemplos anterioresPikaday tiene muchas opciones útiles:

  • field vincular el datepicker a un campo del formulario
  • trigger utilizar un elemento diferente para disparar la apertura del datepicker, ver ejemplo de activación (por defecto field)
  • bound mostrar/ocultar automáticamente el datepicker al enfocar field (por defecto true si field está configurado)
  • ariaLabel atributo de datos en el campo de entrada con un texto de asistencia aria (sólo se aplica cuando bound está configurado)
  • position posición preferida del datepicker en relación con el campo de formulario, e.g.: top right, bottom right Nota: puede producirse un ajuste automático para evitar que el datepicker se muestre fuera de la ventana gráfica, véase el ejemplo de las posiciones (por defecto, ‘abajo a la izquierda’)
  • reposition puede establecerse en false para no reposicionar el datepicker dentro de la ventana gráfica, obligándolo a tomar la position configurada (por defecto: true)
  • container nodo DOM para renderizar el calendario en, ver ejemplo de contenedor (por defecto: undefined)
  • format el formato de salida por defecto para .toString() y field valor (requiere Moment.js para el formato personalizado)
  • formatStrict la bandera por defecto para el análisis sintáctico estricto de la fecha de Moment (requiere Moment.js para el formato personalizado)
  • toString(date, format) función que se utilizará para el formato personalizado. Esta función tendrá prioridad sobre la función moment.
  • parse(dateString, format) que se utilizará para analizar la cadena de entrada y obtener un objeto de fecha a partir de ella. Esta función tendrá prioridad sobre moment.
  • defaultDate la fecha inicial para ver cuando se abre por primera vez
  • setDefaultDate Booleano (verdadero/falso). hacer que el defaultDate el valor inicial seleccionado
  • firstDay primer día de la semana (0: domingo, 1: lunes, etc)
  • minDate la fecha mínima/primera que se puede seleccionar (esto debe ser un objeto Date nativo – e.
  • maxDate la fecha máxima/más tardía que se puede seleccionar (debe ser un objeto Date nativo – por ejemplo, new Date() o moment().toDate())
  • disableWeekends deshabilitar la selección de sábados o domingos
  • disableDayFn función de devolución de llamada a la que se le pasa un objeto Date para cada día en la vista. Debe devolver true para deshabilitar la selección de ese día.
  • yearRange número de años a ambos lados (por ejemplo 10) o matriz de rango superior/inferior (por ejemplo )
  • showWeekNumber mostrar el número de semana ISO en la cabeza de la fila (por defecto false)
  • pickWholeWeek seleccionar una semana entera en lugar de un día (por defecto false)
  • isRTL invertir el calendario para los idiomas de derecha aizquierda idiomas
  • i18n idioma por defecto para los nombres de los meses y días de la semana (véase la internacionalización a continuación)
  • yearSuffix texto adicional para añadir al año en el título
  • showMonthAfterYear renderizar el mes después del año en el título (por defecto false)
  • showDaysInNextAndPreviousMonths renderizar los días de la cuadrícula del calendario que caen en los meses siguientes o anteriores (por defecto: false)
  • enableSelectionDaysInNextAndPreviousMonths permite al usuario seleccionar la fecha que está en los meses siguientes o anteriores (por defecto: false)
  • numberOfMonths número de calendarios visibles
  • mainCalendar cuando se utiliza numberOfMonths, esto le ayudará a elegir dónde estará el calendario principal (por defecto left, se puede establecer en right). Sólo se utiliza para la primera visualización o cuando una fecha seleccionada no es ya visible
  • events matriz de fechas que le gustaría diferenciar de los días regulares (por ejemplo )
  • theme definir un nombre de clase que puede ser utilizado como un gancho para el estilo de diferentes temas, ver ejemplo de tema (por defecto null)
  • blurFieldOnSelect define si el campo se difumina cuando se selecciona una fecha (por defecto true)
  • onSelect función callback para cuando se selecciona una fecha
  • onOpen función callback para cuando el selector se hace visible
  • onClose función de devolución de llamada para cuando el selector se oculta
  • onDraw función de devolución de llamada para cuando el selector dibuja un nuevo mes
  • keyboardInput habilitar el soporte de entrada de teclado (por defecto true)

Estilo

Si la configuración repositionestá habilitada (por defecto), Pikaday aplicará clases CSS al datepicker de acuerdo a cómo esté posicionado:

  • top-aligned
  • left-aligned
  • right-aligned
  • bottom-aligned

Nótese que el elemento DOM en cualquier momento tendrá normalmente 2 clases CSS (ej. top-aligned right-aligned etc).

Plugin de jQuery

La versión normal de Pikaday no requiere jQuery, sin embargo hay un plugin de jQuery si eso flota su barco (ver plugins/pikaday.jquery.js en el repositorio). Esta versión requiere jQuery, naturalmente, y puede ser usada como otros plugins:Vea el ejemplo de jQuery para una versión completa.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="pikaday.js"></script><script src="plugins/pikaday.jquery.js"></script><script>// activate datepickers for all elements with a class of `datepicker`$('.datepicker').pikaday({ firstDay: 1 });// chain a few methods for the first datepicker, jQuery style!$('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);</script>

Soporte de AMD

Si usa un cargador de scripts modular, Pikaday no está ligado al objeto global y encajará bien en su proceso de construcción. Puede requerir Pikaday como cualquier otro módulo.Vea el ejemplo de AMD para una versión completa.

require(, function(Pikaday) { var picker = new Pikaday({ field: document.getElementById('datepicker') });});

Lo mismo se aplica para el plugin de jQuery mencionado anteriormente.Vea el ejemplo de AMD de jQuery para una versión completa.

require(, function($) { $('#datepicker').pikaday();});

Soporte de módulos CommonJS

Si utiliza un entorno compatible con CommonJS puede utilizar la función require para importar Pikaday.

var pikaday = require('pikaday');

Cuando empaquetas todos tus módulos requeridos con Browserify y no usas Moment.js especifica la opción ignore:

browserify main.js -o bundle.js -i moment

Ruby on Rails

Si usas Ruby on Rails, asegúrate de revisar la gema Pikaday.

Métodos

Puedes controlar el selector de fechas después de su creación:

var picker = new Pikaday({ field: document.getElementById('datepicker') });

Obtener y establecer la fecha

picker.toString('YYYY-MM-DD')

Devuelve la fecha seleccionada en un formato de cadena. Si Moment.js existe (recomendado) entonces Pikaday puede devolver cualquier formato que Moment entienda.También puede proporcionar su propia función toString y hacer el formato usted mismo. Lea más en la sección de formato.

Si no existe el objeto moment ni se proporciona la función toString, se utilizará el método .toDateString() por defecto de JavaScript.

picker.getDate()

Devuelve un objeto JavaScript básico Date del día seleccionado, o null si no hay selección.

picker.setDate('2015-01-01')

Ajusta la selección actual. Esto se restringirá dentro de los límites de las opciones minDate y maxDate si se especifican. Opcionalmente se puede pasar un booleano como segundo parámetro para evitar la activación de la llamada de retorno onSelect (true), permitiendo que la fecha se establezca silenciosamente.

picker.getMoment()

Retorna un objeto Moment.js para la fecha seleccionada (Moment debe ser cargado antes que Pikaday).

picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))

Asegura la selección actual con un objeto Moment.js (ver setDate para más detalles).

Borrar y reiniciar la fecha

picker.clear()

Borra y reinicia la entrada a la que está ligado el picker.

Cambiar la vista actual

picker.gotoDate(new Date(2014, 1))

Cambiar la vista actual para ver una fecha específica. Este ejemplo saltará a febrero de 2014 (el mes es un índice basado en cero).

picker.gotoToday()

Acceso a picker.gotoDate(new Date())

picker.gotoMonth(2)

Cambiar la vista actual por mes (0: enero, 1: febrero, etc).

picker.nextMonth()picker.prevMonth()

Ir al mes siguiente o anterior (esto cambiará de año si es necesario).

picker.gotoYear()

Cambiar el año que se está viendo.

picker.setMinDate()

Actualizar la fecha mínima/primera que se puede seleccionar.

picker.setMaxDate()

Actualizar la fecha máxima/última que se puede seleccionar.

picker.setStartRange()

Actualizar la fecha de inicio del rango. Para utilizar dos instancias de Pikaday para seleccionar un rango de fechas.

picker.setEndRange()

Actualizar la fecha de finalización del rango. Para utilizar dos instancias de Pikaday para seleccionar un rango de fechas.

Mostrar y ocultar datepicker

picker.isVisible()

Devuelve true o false.

picker.show()

Hacer visible el selector.

picker.adjustPosition()

Recalcular y cambiar la posición del selector.

picker.hide()

Ocultar el selector haciéndolo invisible.

picker.destroy()

Ocultar el selector y eliminar todos los oyentes de eventos – ¡no hay vuelta atrás!

Internacionalización

El formato de configuración por defecto i18n es el siguiente:

i18n: { previousMonth : 'Previous Month', nextMonth : 'Next Month', months : , weekdays : , weekdaysShort : }

Debe proporcionar 12 meses y 7 días de la semana (con abreviaturas). Especifique siempre los días de la semana en este orden, con el domingo en primer lugar. Puede cambiar la opción firstDay para reordenar si es necesario (0: domingo, 1: lunes, etc). También puede establecer isRTL a true para los idiomas que se leen de derecha a izquierda.

Extensiones

Timepicker

Pikaday es un datepicker puro. No soporta la selección de la hora del día. Sin embargo, ha habido esfuerzos para añadir soporte de tiempo a Pikaday.Ver #1 y #18. Ver #1 y #18. Estos residen en su propia bifurcación.

Puede usar el trabajo que @owenmead hizo recientemente en owenmead/PikadayUn enfoque de selección de hora más simple hecho por @xeeali en xeeali/Pikaday está basado en la versión 1.2.0. También @stas ha hecho un esfuerzo por añadir soporte de hora a Pikaday.2.0.También @stas tiene un fork stas/Pikaday, pero ya es bastante antiguo

Compatibilidad con navegadores

  • IE 7+
  • Chrome 8+
  • Firefox 3.5+
  • Safari 3+
  • Opera 10.6+

Autores

  • David Bushell https://dbushell.com @dbushell
  • Ramiro Rikkert GitHub @RamRik

Gracias a @shoogledesigns por el nombre.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.