Buefy

DatePicker de Buefy en español

Buefy es un paquete de componentes que combinan BulmaCSS y Vue.js. Entre esos componentes encontramos el b-datepicker que no es más que un seleccionador de fechas, calendario o datepicker.

Por defecto viene en inglés, pero provee la manera de especificar los meses y días en español, cosa que te enseñaré hoy: cómo poner el datepicker de Buefy en español.

Especificar meses y días en español

Si leemos la documentación del componente en la página oficial veremos que podemos indicar el nombre de los meses como un arreglo, al igual que el nombre de los días. Para ello se usa respectivamente month-names y day-names.

Estos valores pueden ser escritos directamente en la plantilla o pueden ser parte de la lógica del componente, es decir, venir desde JavaScript.

Datepicker de Buefy en español: html

Como lo dije, podemos pasar los valores directamente en la vista:

See the gist on github.

En data de componente

O podemos ponerlos como arreglos en JavaScript dentro del componente de Vue en data:

See the gist on github.

Y luego usarlos en el HTML:

See the gist on github.

Seleccionador de fecha en español

Sea cual sea el método que hayas usado, al final tendrás el datepicker en idioma español y con los nombres que tú hayas elegido. En mi caso se ve así:

DatePicker (b-datepicker, seleccionador de fechas) en español – Vue y Bulma

Y, por cierto, para tener la primer letra mayúscula utilicé map y la función para convertir la primer letra a mayúscula. Algo así:

See the gist on github.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

  • Soy yo nuevamente, reencontré la solución, gran artículo, parece una nimiedad, pero no, ¡No quiero tener el calendario en inglés y avanzar así en lo que hago, es una pequeña espinita que gracias a tú artículo soluciono.

    ¡Gracias!

Entradas recientes

JavaScript (lado del cliente): leer pixeles de imagen

En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…

6 días hace

PHP y JavaScript: llenar select con AJAX

Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…

7 días hace

Imprimir PDF generado con HTML

Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…

1 semana hace

JavaScript: llenar select con arreglo

En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…

2 semanas hace

Imprimir PDF a partir de URL

En este artículo se presenta una guía para imprimir un PDF a partir de una…

2 semanas hace

Imprimir PDF a partir de base64

En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…

2 semanas hace

Esta web usa cookies.