Search code examples
vue.jsprimevue

Using PrimeVue's Calendar component gives 'Unhandled error during execution of render function ' Vue 3

I'm getting an error when I use the Calendar component provided by VuePrime(version ^3.5.0). The error occurs when I click the input that will then display the calendar itself.

The error that Vue(version 3) is giving is the following: enter image description here

This error is thrown when I click the input element that will fire the event to display the calendar UI element. The error is also thrown when I click outside the same input element, so I think is something related with the show/hide calendar's element.

This is the input element that gets rendered by the Calendar component that once clicked will actually open the calendar UI, so I can select days and so on:

enter image description here

I don't know if this is a Vue' issue or Prime's.

Here is the code of the component that uses the Calendar component. I'm using Options API.

<template>
  <div class="flow-content">
    <h1 class="a-component-title">
      Formulario para registrar evento
    </h1>
    <form @click.prevent>
         <!-- Fields para datos del Evento -->
         <div class="flow-content  p-mt-3">
            <h2 class="form-title p-text-bold">Datos del evento</h2>
            <div class="p-fluid p-formgrid p-grid">
                <div class="p-field p-col-12 p-md-4">
                    <label for="eventoTipo">Tipo/s</label>
                    <MultiSelect    v-model="evento.seleccionadosTipo" 
                                    :options="evento.tipos"
                                    optionLabel="name"
                                    placeholder="Selecciona el tipo"
                                    id="eventoTipo"
                                    display="chip"
                                    :showToggleAll="false"
                                    :filter="true"/>
                </div>
                <div class="p-field p-col-12 p-md-4">
                    <label for="eventoUbicacion">Ubicación</label>
                    <InputText id="eventoUbicacion" type="text" />
                </div>
                <div class="p-field p-col-12 p-md-4">
                    <label for="eventoFecha">Fecha</label>
                    <!--HERE IS THE CALENDAR-->
                    <Calendar v-model="evento.dateCalendar"/>
                </div>
            </div>
         </div>
        
    </form>
  </div>
</template>

<script>
export default {
    data() {
        return {
            denunciante: {
                esAnonimo: false
            },
            evento: {
                seleccionadosTipo: null,
                tipos: [
                    {name: 'Ciudado Inresponsable', id: 450},
                    {name: 'Perra Preñada', id: 55},
                    {name: 'Moquillo', id: 15},
                    {name: 'Perro en vía pública', id: 789}
                ],
                dateCalendar: null
            }
            
        }
    }
}
</script>

By the way, here is the list of dependencies and their versions of my current project:

"dependencies": {
    "@vuelidate/core": "^2.0.0-alpha.19",
    "@vuelidate/validators": "^2.0.0-alpha.16",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "moment": "^2.29.1",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primevue": "^3.5.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "style-resources-loader": "^1.4.1"
  }
Solution

  • I've solved this issue by defining Locale values in the global configuration of VuePrime. It seems that the Calendar component throws a TypeError because It couldn't find the locale text that represent each month.

    Just add a second parameter on the .use function:

    app.use(PrimeVue, {
    locale: {
       dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
       dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
       dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
       monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
       monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
       today: 'Today',
       weekHeader: 'Wk',
       firstDayOfWeek: 0,
       dateFormat: 'mm/dd/yy',
 }
});

    I'll recommend you to include all the locale options that VuePrime offers, but for the calendar component this is enough.

    More about Locale: https://www.primefaces.org/primevue/showcase/#/locale