Change globalization in dateRangePicker in filter column

[Alberto]

Hello guys,
I have this example(with package json updated) and how change globalization in Italian?
https://codesandbox.io/s/155509-daterangepicker-filtering-lxrm8?file=/src/App.vue

I followed this steps(but changing from 'de' to 'it):
https://ej2.syncfusion.com/vue/documentation/daterangepicker/globalization/

but only placeholder is translated, the calendar inside range-picker is in english.
Some suggestions? :)

Thank you!

[Vinitha Balasubramanian]

Hi Customer

Greetings from the Syncfusion support.

Currently we are working your query and we will update further details on April 29, 2022.

until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi Customer ,

Query : Change Globalization in daterangepicker in filter column

Based on your query , we have achieved the Globalization applied on DatePicker on filter action it is achieved by adding locale property to the datePicker component.

The requirement has been achieved by setCulture method and createElement method to create an customized input field to enable filter action on that set the locale property as ‘de’ .

Please refer the below code for your reference

[App.vue]

<template>

    <div id="app">

        <ejs-grid ref="grid" :dataSource="data" :allowFiltering="true"

      :filterSettings="filterSettings">

          <ejs-datepicker id="datepicker" locale="de" ></ejs-datepicker>

          <e-columns>

            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>

            <e-column field='Freight' headerText='Freight' width=90></e-column>

            <e-column field='ShipCity' headerText='Ship City' width=150></e-column>

            <e-column field='OrderDate'  headerText="Order Date" width=120 :filter="filterdate"></e-column>

          </e-columns>

        </ejs-grid>

    </div>

</template>

 

<script>

import Vue from 'vue';

import { GridComponent, ColumnsDirective, ColumnDirective , Filter  } from "@syncfusion/ej2-vue-grids";

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

import { DatePicker } from '@syncfusion/ej2-vue-calendars';

import * as numberingSystems from 'cldr-data/supplemental/numberingSystems.json';

import * as gregorian from 'cldr-data/main/de/ca-gregorian.json';

import * as numbers from 'cldr-data/main/de/numbers.json';

import * as timeZoneNames from 'cldr-data/main/de/timeZoneNames.json';

import * as weekData from 'cldr-data/supplemental/weekdata.json';

 

Vue.use(DatePicker);

loadCldr(numberingSystems, gregorian, numbers, timeZoneNames,weekData);

 

setCulture('de');  

 

L10n.load({

'de': {

    'datepicker': {

       placeholder: 'Wählen Sie einen Bereich aus',

       selectedDays: 'Ausgewählte Tage',

       days: 'Tage',

    }

}

});

 

var data = [

    {

      CustomerID: "VINET",

      OrderDate: new Date("06/02/2021"),

      ShipCity: "Reims",

      Freight: 32.38,

    },

    {

      CustomerID: "TOMSP",

      OrderDate: new Date("05/28/2021"),

      ShipCity: "Münster",

      Freight: 11.61,

    },

    {

      CustomerID: "VINET",

      OrderDate: new Date("06/02/2021"),

      ShipCity: "Reims",

      Freight: 32.38,

    },

    {

      CustomerID: "VINET",

      OrderDate: new Date("06/02/2021"),

      ShipCity: "Reims",

      Freight: 32.38,

    },

    {

      CustomerID: "VINET",

      OrderDate: new Date("06/02/2021"),

      ShipCity: "Reims",

      Freight: 32.38,

    },

    {

      CustomerID: "VINET",

      OrderDate: new Date("06/02/2021"),

      ShipCity: "Reims",

      Freight: 32.38,

    },

]

export default {

  name: "App",

  components: {

  "ejs-grid": GridComponent,

  "e-columns": ColumnsDirective,

  "e-column": ColumnDirective,

  "ejs-datepicker":DatePicker,

  },

  data() {

    let dropInstance = null;

    return {

      data: data,

      filterSettings: { type: "Menu" },

      filter :{

        ui :{

          create:function(args){

 

            var flValInput = createElement('input', { className: 'flm-input' });

            args.target.appendChild(flValInput);

            dropInstance = new DatePicker({

            placeholder: 'Wählen Sie einen Bereich aus',

            locale:'de'

            });

            dropInstance.appendTo(flValInput);

          },

          write: function (args) {

            dropInstance.value = args.filteredValue;

          },

          read: function (args) {

            args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.value);

          }

        }

      }

    };

   

  },

  methods:{

    viewCollection: function(args){

      console.log(args);

    }

  },

   provide: {

    grid: [Page, Filter]

  }

}

</script>

 

<style>

@import https://cdn.syncfusion.com/ej2/material.css;

</style>

    

Kindly get back to us if you need further assistance on this.

Regards,

Vinitha Balasubramanian