Conozca Vuelendar: un Calendario Datepicker Escrito en VueJS

Como la personalización era cada vez más complicada y requería más tiempo, decidimos buscar otra solución. Además, las API no permitían us requisitos que eran cruciales para la calidad del producto final. producto. Por ello, el 1TP57Calendario se hizo.

Puede encontrar la fuente código de la 1TP57Calendario en nuestro Repositorio GitHub.

¿Qué es exactamente?

Como ya habrá adivinado al principio de este artículo, un 1TP57Calendario es un componente de calendario escrito en VueJs. Le permite elegir un rango de fechas o una sola. Lo que es más, ¡también puedes reemplazar fácilmente los días inactivos! Además, te permite añadir CSS personalizados que pueden cambiar el aspecto del calendario.

El proceso de creación

Anteriormente, estábamos usando jQquery para implementar la función de calendario en uno de nuestros proyectos y nos hemos topado con un problema - era difícil de personalizar. Fue entonces cuando decidimos crear nuestro propio componente. En la primera fase, lo utilizamos principalmente en nuestros propios proyectos, pero a medida que pasaba el tiempo, llegamos a la conclusión de que podría ser una solución útil para otros programadores - esto es cuando lo compartimos en la cuenta de GitHub de The Codest en forma de una biblioteca de código.

Instalación

npm install [email protected]

Utilización

Importe estilos en su archivo .vue:

<style src="vuelendar/scss/vuelendar.scss" lang="scss">

Registre los componentes:

import VRangeSelector from 'vuelendar/components/vl-range-selector';;
import VDaySelector from 'vuelendar/components/vl-day-selector';

exportar por defecto {
  components: {
    VRangeSelector,
    VDaySelector
  },
  datos () {
    devolver {
      rango: {},
      fecha: null
    }
  }
  // ...
}

Utilizar en plantilla:

Desactivar fechas

Vuelendar permite dos formas de desactivar las fechas.

Utilizando un array:

Deshabilitará el 21 de abril de 2019 y el 25 de abril de 2019

Utilizar un objeto para describir un intervalo de fechas:

Desactivará todas las fechas a partir del 21 de abril de 2019 y el 25 de abril de 2019

Si sólo se especifica el atributo "desde", se desactivarán todas las fechas anteriores a esa fecha.

Deshabilitará todas las fechas a partir del 21 de abril de 2019

Si sólo se especifica el atributo "hasta", se desactivarán todas las fechas anteriores a esa fecha.

Desactivará todas las fechas anteriores al 21 de abril de 2019

Aplicación

Nuestra 1TP57Calendario puede utilizarse en todos los proyectos basados en VueJS. Es un componente simple pero eficiente que no sólo le ahorrará tiempo como programador, sino que también enriquecerá su proyecto con un calendario que funcione sin problemas. Hoy en día, hay muchos proyectos que podrían necesitar esta solución, ¡así que aquí estamos!

La actualización

Con el lanzamiento de la nueva actualización de VueJS, han aparecido nuevos requisitos. Por eso hemos decidido ajustar nuestro componente de calendario a la nueva versión de VueJS. Era necesario mejorar las librerías para que nuestra pequeña pero útil gema funcionara de forma fluida y eficaz.

Conclusión

Si estás en medio de un proyecto basado en VueJS y buscas una función interesante para un calendario, ¡ésta es definitivamente para ti! Todos sabemos cuánto tiempo puede llevar la creación de estos componentes. Nuestro Vuelandar le ayudarán a darle vida a su solicitud y le ahorrarán tiempo y nervios.

Más información:

Por qué debería (probablemente) utilizar Typescript

¿Cómo no matar un proyecto con malas prácticas de codificación?

Estrategias de obtención de datos en NextJS