1. Home
  2. Forum
  3. Vue
  4. Date internationalization

Date internationalization

Hi,

Our database return locale date format depending Windows language so we can have us date (yyyy dd mm) or french date (yyyy mm dd).

I import french files on app.vue and load culture :

import * as tradFr from "@/locales/syncfusion-fr.json";
import { L10n, setCulture, loadCldr, setCurrencyCode } from "@syncfusion/ej2-base";
import currencies from "@/../node_modules/cldr-data/main/fr/currencies.json"
import cagregorian from "@/../node_modules/cldr-data/main/fr/ca-gregorian.json"
import numberLocale from "@/../node_modules/cldr-data/main/fr/numbers.json"
import timeZoneNames from "@/../node_modules/cldr-data/main/fr/timeZoneNames.json"
import numberingSystems from "@/../node_modules/cldr-data/supplemental/numberingSystems.json"

// Chargement de la culture pour Syncfusion
// Traductions téléchargeables ici : https://github.com/syncfusion/ej2-locale
loadCldr(tradFr, currencies, cagregorian, numberLocale, timeZoneNames, numberingSystems); 
L10n.load({ fr: tradFr.fr });
setCulture("fr");
setCurrencyCode('EUR');


But grid don't display french date correctly :



 

<template>
  <div id="app">
    <ejs-grid
      locale="fr"
      :dataSource="items"
      :allowSorting="true"
      :allowResizing="true"
      :allowPaging="true"
      :allowFiltering="true"
      :allowGrouping="groupingActivated"
      :filterSettings="filterOptions"
      :searchSettings="searchOptions"
      :pageSettings="pageSettings"
      :selectionSettings="selectionOptions"
      :dataBound="dataBound"
      :frozenColumns="groupingActivated ? 0 : frozenColumns"
      @recordClick="recordClick($event)"
      :rowSelected="rowSelected"
      rowHeight="38"
      height="100%"
      ref="grid"
    >
      <e-columns>
        <e-column
          type="checkbox"
          textAlign="Center"
          width="40"
          :allowResizing="false"
        ></e-column>
        <e-column
          v-if="isActionPropActive"
          maxWidth="130"
          textAlign="Center"
          :template="colTemplate"
          :allowSorting="false"
          :allowResizing="false"
        ></e-column>
        <e-column
          v-for="field in fields.filter((f) => f.key !== actionsProp)"
          :key="field.key"
          :field="field.key"
          :headerText="field.label"
          :allowSorting="field.sortable"
          :visible="field.visible"
          :disableHtmlEncode="false"
          :type="field.type"
          :format="field.type == 'date' ? dateFormat : ''"
          width="150"
        ></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>
<script>
import Vue from "vue";
import {
  GridPlugin,
  Resize,
  Sort,
  Page,
  Filter,
  Group,
  Freeze,
} from "@syncfusion/ej2-vue-grids";
import ButtonActionsTableSF from "@/components/common/ButtonActionsTableSF.vue";

Vue.prototype.$eventHub = new Vue();

Vue.use(GridPlugin);

export default {
  components: {
    ButtonActionsTableSF,
  },
  props: {
    frozenColumns: Number,
    items: Array,
    fields: Array,
    filterValue: String,
    loading: Boolean,
    groupingActivated: Boolean,
    actionsProp: {
      type: String,
      default: "#",
    },
    isActionPropActive: Boolean,
  },
  provide: {
    grid: [Page, Resize, Sort, Filter, Group, Freeze],
  },
  created() {
    this.$eventHub.$on("edit", (id) => {
      this.$emit("edit", id);
    });
    this.$eventHub.$on("remove", (id) => {
      this.$emit("remove", id);
    });
  },
  data: () => {
    return {
      colTemplate: function () {
        return { template: ButtonActionsTableSF };
      },
      pageSettings: {
        pageSizes: [10, 25, 50, 100, 200],
        pageCount: 4,
        pageSize: 25,
      },
      filterOptions: {
        type: "Excel",
      },
      filter: {
        type: "CheckBox",
      },
      selectionSettings: {
        persistSelection: true,
        type: "Multiple",
        checkboxOnly: true,
      },
      selectionOptions: { mode: "Row", checkboxMode: "ResetOnRowClick" },
      dateFormat: { type: "date", format: "dd/MM/yyyy" },
    };
  },
  methods: {
    dataBound: function (args) {
      // Dimensionne les colonnes en fonction du contenu
      this.$refs.grid.autoFitColumns();
    },
    // Evènement onClic sur la ligne
    recordClick: function (args) {
      if (args.cellIndex > 1) {
        this.$emit("rowClick", args.rowData);
      }
    },
    // Retourne les lignes sélectionnées
    rowSelected: function (args) {
      this.$emit("selectionChange", this.$refs.grid.getSelectedRecords());
    },
  },
  computed: {
    searchOptions: function () {
      return {
        operator: "contains",
        key: this.filterValue ? this.filterValue : "",
        ignoreCase: true,
      };
    },
  },
};
</script>
<style>
@import "../../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

/* Modif des couleurs
TODO : à faire dans un prochain PBI, utiliser Theme Studio pour customiser le thème material.css
https://ej2.syncfusion.com/themestudio/?theme=material
 */
.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
  background-color: var(--info);
}

.e-grid .e-frozenheader > .e-table,
.e-grid .e-frozencontent > .e-table,
.e-grid .e-frozencontent .e-virtualtable > .e-table,
.e-grid .e-frozenheader .e-virtualtable > .e-table {
  border-right-color: var(--info);
}

.e-headertext {
  font-size: 12px !important;
}

.e-pager .e-pagerconstant {
  margin: 0 0 8px 12px;
}
</style>


Thank you for your help


1 Reply
RS Rajapandiyan Settu Syncfusion Team September 30, 2021 11:14 AM UTC

Hi NAUD,  
  
Greetings from Syncfusion support. 

Based on your requirement, you want to dynamically change the format on Date column based on culture. 

By validating your code example, we found that you are using custom DateFormat in the Grid Column. By default, the custom format will be applied for the all the culture and it does not depends on the culture type. 

We suggest you to use standard date format on Grid column and it will changed based on the culture. Find the below code example and sample for your reference. 



[App.vue] 

 
    <ejs-grid 
      ref="grid" 
      id="grid" 
      :dataSource="data" 
      :allowFiltering="true" 
      :filterSettings="filterOptions" 
      height="270" 
    > 
      <e-columns> 
        --- 
        <e-column 
          field="OrderDate" 
          headerText="Order Date" 
          format="yMd" 
          width="100" 
        ></e-column> 
      </e-columns> 
    </ejs-grid> 
 



Note:  
By analyzing your code example, we found that you have used dateString value in the Grid’s dataSource and displayed it as dateObject in UI by setting column type as date and applying format in the column model.   
If you using dateString value for date column, then Filtering, Sorting, etc., are not working properly on that column. So, we suggest you to use dateObject values for date fields in your dataSource. 
 
Please get back to us if you need further assistance with this. 

Regards,  
Rajapandiyan S 


Loader.
Up arrow icon