Translate inner Calendar in Query Builder to another language

[salwaen]

Hi, I want to translate the calendar inside the component Query Builder using the date column.

Can you help me how to use the CLDR (de-DE) using Vue 3 syncfusion components?

Thank you.

[Aravinthan Seetharaman]

Hi salwaen, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We need to validate more on this with our dependent component team. So, we will update further details on 20^th December 2021. We appreciate your patience until then. 

 

Regards, 

Aravinthan S

[Gayathri KarunaiAnandam]

Hi Salwaen, 

We have checked your query. We can change the culture of Querybuilder by using the locale property. We need to use loadCldr method to load culture for calendar component inside querybuilder. We have prepared a sample based on your requirement. Please check the below code snippet. 

Code: 

<template> 

<div class="control-section"> 

    <div class="col-lg-12 querybuilder-control"> 

        <ejs-querybuilder width="70%" locale='de'> 

            <e-columns> 

                <e-column field='EmployeeID' label='Employee ID' type='number' /> 

                <e-column field='FirstName' label='First Name' type='string' /> 

                <e-column field='Title' label='Title' type='string' /> 

                <e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' /> 

                <e-column field='Country' label='Country' type='string' /> 

                <e-column field='City' label='City' type='string' /> 

            </e-columns> 

        </ejs-querybuilder> 

    </div> 

</div> 

</template> 

<script> 

import { QueryBuilderComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-querybuilder"; 

import { loadCldr, L10n ,setCulture} from '@syncfusion/ej2-base'; 

setCulture('de-DE'); 

loadCldr(   

    require('cldr-data/main/de/numbers.json'),   

    require('cldr-data/main/de/ca-gregorian.json'),   

    require('cldr-data/main/de/numbers.json'),   

    require('cldr-data/main/de/timeZoneNames.json'),   

    require('cldr-data/supplemental/weekData.json') // To load the culture based first day of week   

);  

L10n.load({ 

'de': { 

  'datepicker': { placeholder: "Wählen Sie Datum und Uhrzeit", 

         today: "heute"}, 

    'querybuilder': { 

            'AddGroup': 'Gruppe hinzufügen', 

            'AddCondition': 'Bedingung hinzufügen', 

            'DeleteRule': 'Entfernen Sie diesen Zustand', 

            'DeleteGroup': 'Gruppe löschen', 

            'Edit': 'BEARBEITEN', 

            'SelectField': 'Wählen Sie ein Feld aus', 

            'SelectOperator': 'Operator auswählen', 

            'StartsWith': 'Beginnt mit', 

            'EndsWith': 'Endet mit', 

            'Contains': 'Enthält', 

            'Equal': 'Gleich', 

            'NotEqual': 'Nicht gleich', 

            'LessThan': 'Weniger als', 

            'LessThanOrEqual': 'Weniger als oder gleich', 

            'GreaterThan': 'Größer als', 

            'GreaterThanOrEqual': 'Größer als oder gleich', 

            'Between': 'Zwischen', 

            'NotBetween': 'Nicht zwischen', 

            'In': 'Im', 

            'NotIn': 'Nicht in', 

            'Remove': 'LÖSCHEN', 

            'ValidationMessage': 'Dieses Feld wird benötigt', 

        } 

} 

}); 

//Component registeration 

export default { 

name: 'App', 

components: { 

     "ejs-querybuilder": QueryBuilderComponent, 

      "e-columns": ColumnsDirective, 

      "e-column": ColumnDirective 

}, 

} 

</script> 

For your convenience, please check the below sample link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3-querybuilder-2017638550 

To know more about locale, please check the below link. 

Documentation: 

https://ej2.syncfusion.com/vue/documentation/datepicker/globalization/ 

https://ej2.syncfusion.com/vue/documentation/query-builder/global-local/ 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K