Customize Culture

Posted by: hieu.van.nguyen on 19 December 2023, 3:27 am EST

  • Posted 19 December 2023, 3:27 am EST - Updated 19 December 2023, 7:15 am EST

    Hi Support team,

    I’m trying to define the culture for the en-GB locale below:

    {
      'en-GB': {
        id: 0x809,
        displayName: 'English (United Kingdom)',
        name: 'en-GB',
        currencySymbol: '\u00a3',
        numberDecimalSeparator: '.',
        numberGroupSeparator: ',',
        arrayGroupSeparator: ';',
        arrayListSeparator: '\\',
        listSeparator: ';',
        amDesignator: 'AM',
        pmDesignator: 'PM',
        abbreviatedMonthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ''],
        abbreviatedDayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        abbreviatedMonthGenitiveNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ''],
        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        fullDateTimePattern: 'dddd, d. mmmm yyyy hh:mm:ss',
        longDatePattern: 'dddd, d. mmmm yyyy',
        longTimePattern: 'hh:mm:ss',
        monthDayPattern: 'dd mmmm',
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ''],
        monthGenitiveNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', ''],
        shortDatePattern: 'dd/mm/yyyy',
        shortTimePattern: 'hh:mm',
        yearMonthPattern: 'mmm yyyy',
        accounting: '_-[$£-809]* #,##0.#_-;-[$£-809]* #,##0.#_-;_-[$£-809]* "-"??_-;_-@_-',
        currency: [
          '#,##0.00',
          '[$£-809]#,##0;[Red][$£-809]#,##0',
          '[$£-809]#,##0;-[$£-809]#,##0',
          '[$£-809]#,##0;[Red]-[$£-809]#,##0'
        ],
        date: [
          'dd/mm/yyyy;@',
          'dd/mm/yy;@',
          'd/m/yy;@',
          'd.m.yy;@',
          'yyyy-mm-dd;@',
          '[$-en-GB]d mmmm yyyy;@'
        ],
        time: [
          'hh:mm:ss;@',
          'h:mm:ss;@',
          '[$-en-US]hh:mm:ss AM/PM;@',
          '[$-en-US]h:mm:ss AM/PM;@'
        ],
        special: {
        }
      }


    I have an Excel file with some cells formatted “dd/mm/yyyy” with the locale is en-GB



    when I open that file on my app with the locale I defined above, the locale display is correct



    but when I input the new value in the other cell (15/01/2023), it does not get the correct date format



    Can you point out my mistake in the definition above?

    Many thanks.

    Hieu.

  • Posted 20 December 2023, 2:14 am EST

    Hi @SpreadJs Team any update on this one

  • Posted 20 December 2023, 5:00 am EST

    Hi,

    This is expected because spreadJS is a client-side component that does not know the culture of the Excel file (from which culture it is coming from). To tackle this issue spreadJS provides API localeNumberFormat in which you can define the locale format of the excel file before importing it into spreadJS. Please refer to the following code snippet and let me know if you face any issues.

    // Initialize Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // Get the sheet
    var sheet = spread.sheets[0];
    var excelIO = new GC.Spread.Excel.IO();
    $("#button1").click(function () {
        spread.suspendPaint();
        // Create new culture info
        var culture = new GC.Spread.Common.CultureInfo();
        culture.LocalNumberFormat = {
           14: "yyyy/m/d",
           15: "yyyy/m/d"
        };
        // Set culture info to Culture Manager
        GC.Spread.Common.CultureManager.addCultureInfo("fr", culture);
        GC.Spread.Common.CultureManager.culture("fr");
        // Import Excel file
        var excelFile = document.getElementById("fileDemo").files[0];
        excelIO.open(excelFile, function (json) {
            var workbookObj = json;
            spread.fromJSON(workbookObj);
        }, function (e) {
            console.log(e);
        });
        spread.resumePaint();

    Docs: https://developer.mescius.com/spreadjs/docs/excelimpexp/excelimport/LocalebasedDateFormatImported#site_main_content-doc-content_title

    Regards,

    Avinash

  • Posted 20 December 2023, 11:58 pm EST - Updated 21 December 2023, 12:03 am EST

    Hi Avinash,

    When I asked this question, I used that method before but this issue still occurs. As shown in the picture below, I entered the value “15/01/2023” but it shows the type as a general while the date format has been defined and the locale has been set correctly





    Please help me double-check it. Many thanks.

    Hieu

  • Posted 21 December 2023, 8:02 am EST - Updated 21 December 2023, 8:07 am EST

    Hi,

    We have tested the latest version and on our end, it works fine instead of the date it shows custom which is expected as told spreadJS about the file locale and provided our local custom format. Please refer to the following sample and if the issue persists please share a working sample that replicates the issue so that we can investigate it further and help you accordingly.

    sample: https://jscodemine.grapecity.com/share/BXOk-v7RbkabhNg-9FzfSw/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Ftsconfig.json"%2C"%2Fsystemjs.config.js"%2C"%2Fpackage.json"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Findex.html"}

    Regards,

    Avinash

  • Posted 22 December 2023, 3:41 am EST - Updated 22 December 2023, 3:47 am EST

    Hi Avinash,

    I have tested in the link you provided above, even though the en-uk locale option has been set, but when I enter the value “15/01/2023” into the empty cell, it auto converts to the value “15-01-2023” with the custom type, is not date type, even though the date format is defined in the predefinedFormats





    Regards.

    Hieu.

  • Posted 25 December 2023, 2:52 am EST

    Hi @SpreadJs team any update on this one?

  • Posted 26 December 2023, 6:04 am EST

    Hi,

    Apologies for the late response. I am able to observe the behavior with the sample. I am currently investigating the issue.

    I will update you about my findings soon.

    Regards,

    Ankit

  • Posted 27 December 2023, 12:31 am EST

    Hi,

    The reason why it shows “15-01-2023” is because the date separator was set to “-” . You could set the date formatter to “/” and it will show the value “15/01/2023” when you enter “15/01/2023”.

    Yes, I agree that we have defined the formatter “dd/mm/yyyy” in the predefinedFormats (Date) , still SpreadJS Format Dialog shows the format as “Custom”. For this, I have escalated the case to the concerned dev team for further investigation. The internal tracking id for the same is: SJS-22078 and I will let you know when I have an update from the dev team.

    Regards,

    Ankit

  • Posted 11 January 2024, 7:57 am EST

    Hi,

    The devs have mentioned that you need to set the ShortDate format in the resources. Kindly refer to the following code snippet:

    // Get the Resources
    let res = GC.Spread.Sheets.Designer.getResources();
    res.commonFormats.ShortDate.format = "dd/mm/yyyy";
    // Set the Resources
    GC.Spread.Sheets.Designer.setResources(res);

    In Microsoft Excel, when you enter a date value as a cell, a date formatter will be applied to the cell directly.

    And SpreadJS, as a component, we don’t pollute the user’s data (the cell style is kind of user data).

    If you want the “Format Dialog” to show the category as Date, you could monitor the CellChanged, set the autoFormatter to the cell formatter. If you want the “Format Dialog” to show the category as Date, use the following code snippet:

    spread.bind(GC.Spread.Sheets.Events.CellChanged, function (evt, args) {
        if (args.propertyName === '[styleinfo]' && !args.oldValue && args.newValue && args.newValue._autoFormatter) {
            var { sheet, row, col } = args;
            var style = sheet.getStyle(row, col);
            style.formatter = style._autoFormatter;
            sheet.setStyle(row, col, style);
        }
    })

    Sample: https://jscodemine.grapecity.com/share/1a2aExkwXkKQduPx3l37Ug/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    References:

    getResources() method: https://developer.mescius.com/spreadjs/api/v16/designer/modules/GC.Spread.Sheets.Designer#getresources

    setResouces() method: https://developer.mescius.com/spreadjs/api/v16/designer/modules/GC.Spread.Sheets.Designer#setresources

    Regards,

    Ankit

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels