Before writing this question I read Can we call the function written in one JavaScript in another JS file? and Calling a JavaScript function in another js file but still cannot fix my issue.
I am getting the error message - Uncaught ReferenceError: getLocaleDateString is not defined.
The file that contains the function is being loaded before the file that needs the function.
When I copy the contents of getLocaleDataString.js into sys.datepicker.js everything works fine, but the code then starts to look messy and is hard to navigate.
reigster4.html
<body>
<script src='{% static "getLocaleDateString.js" %}'></script>
<script src='{% static "sys.datepicker.js" %}'></script>
</body>
getLocaleDataString.js
(function ($) {
function getLocaleDateString() {
const formats = {
"af-ZA": "yyyy/MM/dd",
"zu-ZA": "yyyy/MM/dd",
};
return formats[navigator.language] || "dd/MM/yyyy";
} //end of getLocaleDateString
})
sys.datepicker.js
function formatDate(year, month, day) {
let str = (navigator.language, getLocaleDateString());
return(str)
}
Update - getLocaleDataString.js
I changed the code to this
function getLocaleDateString() {
const formats = {
"af-ZA": "yyyy/MM/dd",
"zu-ZA": "yyyy/MM/dd",
};
return formats[navigator.language] || "dd/MM/yyyy";
} //end of getLocaleDateString
Simply commenting out the rouge code did not work. I had to physically delete it.
Now everything is working correctly.