Posted 13 January 2025, 3:37 pm EST - Updated 13 January 2025, 3:42 pm EST
Locale-aware date format opens not automatically formatting using user's region
Posted by: dean.kinnear on 13 January 2025, 3:37 pm EST
-
dean.kinnear
-
priyam.kushwaha
Posted 14 January 2025, 2:40 am EST
Hi,
Microsoft Excel is a native application that automatically adopts the Short Date Format from your system settings and displays dates accordingly. For instance, if your system’s Short Date Format is set to “dd/mm/yyyy”, Excel will show dates in that “dd/mm/yyyy” format.
In contrast, SpreadJS is a web application and cannot access the system’s Short Date Format. Browsers do not have direct access to system settings for security and privacy reasons. When you enter a date in SpreadJS, it auto-formats the date based on the culture settings you have configured. By default, the shortDatePattern for dates is “M/d/yyyy”. SpreadJS will attempt to parse the entered date string according to this pattern. If the string matches this pattern, it will be recognized as a date; otherwise, it will be treated as a string.
Regarding your question, “Is there anything I need to do to get a dynamic date-formatted cell to work in SpreadJS?”—based on the information provided above, you can change the date format by adjusting the culture settings. To learn how to change the culture, please refer to this demo: https://developer.mescius.com/spreadjs/demos/features/culture/globalization/purejs
Regards,
Priyam -
dean.kinnear
Posted 14 January 2025, 1:13 pm EST
So I should be able to do something like this:
const cultureName = navigator.language; GC.Spread.Common.CultureManager.culture(cultureName);And dates will appear using browser locale?
Do I have to include spreadjs.globalization.min.js?
-
priyam.kushwaha
Posted 15 January 2025, 2:55 am EST - Updated 15 January 2025, 3:00 am EST
Hi,
Yes, you can use navigator.language to retrieve the user’s locale and define the culture for SpreadJS accordingly. This allows you to adjust the SpreadJS locale settings to match the user’s environment. Below is a sample snippet demonstrating how to achieve this, along with the attached “Steps.gif” and sample:
const userLocale = navigator.language || navigator.userLanguage; if (userLocale.includes("bg-BG")) { // Set to "bg-BG" culture GC.Spread.Common.CultureManager.culture("bg-BG"); } else { GC.Spread.Common.CultureManager.culture("en-US"); }Gif:
This approach uses the browser’s language settings, which typically reflect the user’s system configuration.
Additionally, for each culture you wish to support, you must define a corresponding culture object, similar to how the bg-BG culture is defined. You can explore more about this in the Globalization Demo: https://developer.mescius.com/spreadjs/demos/features/culture/globalization/purejs.
Regarding “And dates will appear using browser locale?”, you can retrieve the browser’s locale and set the corresponding culture object that you have defined. SpreadJS will then use this culture object to display dates according to the specified locale.
Regarding “Do I have to include spreadjs.globalization.min.js?”, this script provides some predefined cultures that you can use. However, for unsupported cultures, you will need to define custom culture objects yourself, as demonstrated in the demo.
For further reference on obtaining user location and region:
- Getting the user’s region with navigator.language: https://stackoverflow.com/questions/39213855/getting-the-users-region-with-navigator-language
- Get user country and region on browser with JavaScript only: https://www.techighness.com/post/get-user-country-and-region-on-browser-with-javascript-only/
- How to get user location with JavaScript: https://www.geoapify.com/how-to-get-user-location-with-javascript/
Regards,
Priyam
