Agregando un datepicker con Vue.js

Cuando estamos construyendo un formulario o algún componente en nuestras aplicaciones es probable que queramos agregar la opción de seleccionar una fecha y aunque los navegadores modernos permiten incluir un datepicker directamente con HTML sin necesidad de usar JavaScript, dicha opción ofrece menos posibilidades de personalización.

vuejs-datepicker es una librería de Vue.js que nos permite agregar un datepicker que permite ser personalizado y con el cual podemos manipular el valor seleccionado en tiempo real.

Instalación

Para instalar vuejs-datepicker ejecutamos el siguiente comando de NPM:

npm install vuejs-datepicker --save

Luego debemos importar el componente:

import Datepicker from 'vuejs-datepicker';

export default {
    components: {
        Datepicker
    }
    // ...
}

También puedes incluir la librería directamente desde el CDN:

<script src="https://unpkg.com/vuejs-datepicker"></script>

Luego sólo debemos importarla:

<script>
const app = new Vue({
    el: '#app',
    components: {
        vuejsDatepicker
    }
})
</script>

Utilizando el datepicker

El uso es muy simple, sólo debemos incluir el datepicker en nuestra plantilla:

<datepicker></datepicker>

Si estás importando la librería desde el CDN debes utilizar <vuejs-datepicker>:

<vuejs-datepicker></vuejs-datepicker>

Podemos pasar un valor por defecto con :value el cual debe ser un objeto de tipo Date:

data () {
    return {
	date: new Date(2016, 9, 16)
    }
}

Luego en nuestra plantilla pasamos el valor:

<datepicker :value="date"></datepicker>

El objeto Date cuenta los meses desde cero en lugar de uno por lo que el mes mostrado al pasar el argumento 9 es octubre (enero sería 0).

También podemos usar v-model para que el valor sea reactivo y se actualice en caso de que nuestros datos cambien:

<datepicker v-model="date"></datepicker>

Podemos pasar una propiedad name para luego procesar el valor seleccionado como si se tratara de un elemento de formulario:

<datepicker v-model="date" name="fecha"></datepicker>

Emitiendo eventos

Podemos emitir eventos al abrir, cerrar o seleccionar un valor en el datepicker:

• Con @opened podemos emitir un evento al abrir el datepicker.
• Con @closed podemos emitir un evento al cerrar el datepicker.
• Con @selected podemos emitir un evento al seleccionar un valor en el datepicker.

Por ejemplo, podemos ejecutar el método datepickerAbierto al abrir el datepicker, fechaSeleccionada al seleccionar una fecha y datepickerCerrado al cerrarlo:

// Datepicker con los eventos a emitir
<datepicker v-model="date" name="fecha" 
    @opened="datepickerAbierto" 
    @selected="fechaSeleccionada" 
    @closed="datepickerCerrado">
</datepicker>

// Nuestros métodos
methods: {
    datepickerAbierto: function() {
	console.log('El datepicker ha sido abierto');
    },
    fechaSeleccionada: function() {
        console.log('Una fecha ha sido seleccionada');
    },
    datepickerCerrado: function() {
        console.log('El datepicker ha sido cerrado');
    }
}

Ten en cuenta que el evento closed es llamado automáticamente cuando ocurre el evento selected.

Mostrando el datepicker directamente

Con la propiedad inline podemos mostrar el datepicker directamente sin necesidad de seleccionar un campo de texto:

<datepicker v-model="date" name="fecha" :inline="true"></datepicker>

Otros eventos y propiedades

Tenemos una serie de eventos adicionales que podemos utilizar:

• selectedDisabled: Ejecuta un evento si una fecha deshabilitada es seleccionada.
• cleared: Ejecuta un evento si la fecha seleccionada es removida.
• changedMonth: Ejecuta un evento cuando el mes ha cambiado.
• changedYear: Ejecuta un evento cuando el año ha cambiado.
• changedDecade: Ejecuta un evento cuando la década ha cambiado.

Podemos pasar diferentes propiedades adicionales al datepicker, como clear-button que muestra un ícono para remover el valor seleccionado. Esta propiedad puede ser usada junto con cleared para ejecutar un evento cuando el valor sea removido:

<datepicker v-model="date" @cleared="valorRemovido" clear-button></datepicker>

Otras propiedades que podemos usar son:

• monday-first que muestra el inicio de la semana los días lunes. El valor por defecto es false.
• calendar-button agrega un botón que al ser presionado muestra el datepicker.
• bootstrap-styling para agregar los estilos de Bootstrap.
• disabled que deshabilita el datepicker.
• typeable permite escribir la fecha directamente.
• calendar-class permite agregar una clase de CSS para personalizar el calendario.
• input-class permite agregar una clase de CSS para personalizar el campo.

Puedes ver una lista completa de las propiedades en el repositorio de Github de la librería.

Mostrando el datepicker en español

Podemos mostrar los días y los meses en español importando locale directamente desde la librería:

import { es } from 'vuejs-datepicker/dist/locale'

Luego debemos incluir el valor en nuestros datos:

data () {
    return {
      es: es,
      date: new Date(2016, 9, 16)
    }
}

Finalmente agregamos la propiedad language con el valor es a nuestro datepicker:

<datepicker v-model="date" :language="es"></datepicker>

Como puedes ver el funcionamiento de esta librería es muy sencillo y práctico. Espero que te haya gustado el tutorial y te sea útil. En el material relacionado podrás encontrar mucho más contenido sobre Vue.js además del repositorio de Github de vuejs-datepicker.

Material relacionado

• Curso de Vue 2
• Libro: La Elegancia de Vue.js
• Curso de Testing con Vue.js 2
• Repositorio de Github de vuejs-datepicker

No olvides seguirnos en Twitter y suscribirte a nuestro boletín:

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

Publicado por: David Palacios

Neuroscience nerd. No me gusta el small talk ni el ruido. Me gusta JavaScript y Vue. Tratando de aprender más cada día.

componente Vue.js datepicker Vue.js vuejs-datepicker