Skip to content

Instantly share code, notes, and snippets.

@johnnyreilly

johnnyreilly/globalize-localeDisplayNames.js

Created October 7, 2015 08:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnnyreilly/e97b97afa5217e4065a9 to your computer and use it in GitHub Desktop.
Save johnnyreilly/e97b97afa5217e4065a9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
globalize-localeDisplayNames.js
<!DOCTYPE html>
<!-- saved from url=(0094)http://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/AdvancedDemo/Globalize.html -->
<html lang="en" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Globalize - jQuery Validation Unobtrusive Native</title>
<link href="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/Content/site.css" rel="stylesheet">
<body>
<form method="post" novalidate="novalidate"> <div class="row">
<label for="localeSelector">Current locale:</label>
<select id="localeSelector" aria-invalid="false" class="valid">
<option>af</option>
<option>af-NA</option>
<option>am</option>
<option>ar</option>
<option>ar-AE</option>
<option>ar-BH</option>
<option>ar-DJ</option>
<option>ar-DZ</option>
<option>ar-EG</option>
<option>ar-EH</option>
<option>ar-ER</option>
<option>ar-IL</option>
<option>ar-IQ</option>
<option>ar-JO</option>
<option>ar-KM</option>
<option>ar-KW</option>
<option>ar-LB</option>
<option>ar-LY</option>
<option>ar-MA</option>
<option>ar-MR</option>
<option>ar-OM</option>
<option>ar-PS</option>
<option>ar-QA</option>
<option>ar-SA</option>
<option>ar-SD</option>
<option>ar-SO</option>
<option>ar-SS</option>
<option>ar-SY</option>
<option>ar-TD</option>
<option>ar-TN</option>
<option>ar-YE</option>
<option>az</option>
<option>az-Latn</option>
<option>be</option>
<option>bg</option>
<option>bn</option>
<option>bn-IN</option>
<option>bs</option>
<option>bs-Latn</option>
<option>ca</option>
<option>ca-AD</option>
<option>ca-ES-VALENCIA</option>
<option>ca-FR</option>
<option>ca-IT</option>
<option>cs</option>
<option>cy</option>
<option>da</option>
<option>da-GL</option>
<option>de</option>
<option>de-AT</option>
<option>de-BE</option>
<option>de-CH</option>
<option>de-LI</option>
<option>de-LU</option>
<option>el</option>
<option>el-CY</option>
<option selected="selected">en</option>
<option>en-001</option>
<option>en-150</option>
<option>en-AG</option>
<option>en-AI</option>
<option>en-AS</option>
<option>en-AT</option>
<option>en-AU</option>
<option>en-BB</option>
<option>en-BE</option>
<option>en-BI</option>
<option>en-BM</option>
<option>en-BS</option>
<option>en-BW</option>
<option>en-BZ</option>
<option>en-CA</option>
<option>en-CC</option>
<option>en-CH</option>
<option>en-CK</option>
<option>en-CM</option>
<option>en-CX</option>
<option>en-CY</option>
<option>en-DE</option>
<option>en-DG</option>
<option>en-DK</option>
<option>en-DM</option>
<option>en-ER</option>
<option>en-FI</option>
<option>en-FJ</option>
<option>en-FK</option>
<option>en-FM</option>
<option>en-GB</option>
<option>en-GD</option>
<option>en-GG</option>
<option>en-GH</option>
<option>en-GI</option>
<option>en-GM</option>
<option>en-GU</option>
<option>en-GY</option>
<option>en-HK</option>
<option>en-IE</option>
<option>en-IL</option>
<option>en-IM</option>
<option>en-IN</option>
<option>en-IO</option>
<option>en-JE</option>
<option>en-JM</option>
<option>en-KE</option>
<option>en-KI</option>
<option>en-KN</option>
<option>en-KY</option>
<option>en-LC</option>
<option>en-LR</option>
<option>en-LS</option>
<option>en-MG</option>
<option>en-MH</option>
<option>en-MO</option>
<option>en-MP</option>
<option>en-MS</option>
<option>en-MT</option>
<option>en-MU</option>
<option>en-MW</option>
<option>en-MY</option>
<option>en-NA</option>
<option>en-NF</option>
<option>en-NG</option>
<option>en-NL</option>
<option>en-NR</option>
<option>en-NU</option>
<option>en-NZ</option>
<option>en-PG</option>
<option>en-PH</option>
<option>en-PK</option>
<option>en-PN</option>
<option>en-PR</option>
<option>en-PW</option>
<option>en-RW</option>
<option>en-SB</option>
<option>en-SC</option>
<option>en-SD</option>
<option>en-SE</option>
<option>en-SG</option>
<option>en-SH</option>
<option>en-SI</option>
<option>en-SL</option>
<option>en-SS</option>
<option>en-SX</option>
<option>en-SZ</option>
<option>en-TC</option>
<option>en-TK</option>
<option>en-TO</option>
<option>en-TT</option>
<option>en-TV</option>
<option>en-TZ</option>
<option>en-UG</option>
<option>en-UM</option>
<option>en-US-POSIX</option>
<option>en-VC</option>
<option>en-VG</option>
<option>en-VI</option>
<option>en-VU</option>
<option>en-WS</option>
<option>en-ZA</option>
<option>en-ZM</option>
<option>en-ZW</option>
<option>es</option>
<option>es-419</option>
<option>es-AR</option>
<option>es-BO</option>
<option>es-CL</option>
<option>es-CO</option>
<option>es-CR</option>
<option>es-CU</option>
<option>es-DO</option>
<option>es-EA</option>
<option>es-EC</option>
<option>es-GQ</option>
<option>es-GT</option>
<option>es-HN</option>
<option>es-IC</option>
<option>es-MX</option>
<option>es-NI</option>
<option>es-PA</option>
<option>es-PE</option>
<option>es-PH</option>
<option>es-PR</option>
<option>es-PY</option>
<option>es-SV</option>
<option>es-US</option>
<option>es-UY</option>
<option>es-VE</option>
<option>et</option>
<option>eu</option>
<option>fa</option>
<option>fa-AF</option>
<option>fi</option>
<option>fil</option>
<option>fo</option>
<option>fo-DK</option>
<option>fr</option>
<option>fr-BE</option>
<option>fr-BF</option>
<option>fr-BI</option>
<option>fr-BJ</option>
<option>fr-BL</option>
<option>fr-CA</option>
<option>fr-CD</option>
<option>fr-CF</option>
<option>fr-CG</option>
<option>fr-CH</option>
<option>fr-CI</option>
<option>fr-CM</option>
<option>fr-DJ</option>
<option>fr-DZ</option>
<option>fr-GA</option>
<option>fr-GF</option>
<option>fr-GN</option>
<option>fr-GP</option>
<option>fr-GQ</option>
<option>fr-HT</option>
<option>fr-KM</option>
<option>fr-LU</option>
<option>fr-MA</option>
<option>fr-MC</option>
<option>fr-MF</option>
<option>fr-MG</option>
<option>fr-ML</option>
<option>fr-MQ</option>
<option>fr-MR</option>
<option>fr-MU</option>
<option>fr-NC</option>
<option>fr-NE</option>
<option>fr-PF</option>
<option>fr-PM</option>
<option>fr-RE</option>
<option>fr-RW</option>
<option>fr-SC</option>
<option>fr-SN</option>
<option>fr-SY</option>
<option>fr-TD</option>
<option>fr-TG</option>
<option>fr-TN</option>
<option>fr-VU</option>
<option>fr-WF</option>
<option>fr-YT</option>
<option>ga</option>
<option>gl</option>
<option>gu</option>
<option>he</option>
<option>hi</option>
<option>hr</option>
<option>hr-BA</option>
<option>hu</option>
<option>hy</option>
<option>id</option>
<option>is</option>
<option>it</option>
<option>it-CH</option>
<option>it-SM</option>
<option>ja</option>
<option>ka</option>
<option>kk</option>
<option>km</option>
<option>kn</option>
<option>ko</option>
<option>ko-KP</option>
<option>ky</option>
<option>lo</option>
<option>lt</option>
<option>lv</option>
<option>mk</option>
<option>ml</option>
<option>mn</option>
<option>mr</option>
<option>ms</option>
<option>ms-BN</option>
<option>ms-SG</option>
<option>my</option>
<option>nb</option>
<option>nb-SJ</option>
<option>ne</option>
<option>ne-IN</option>
<option>nl</option>
<option>nl-AW</option>
<option>nl-BE</option>
<option>nl-BQ</option>
<option>nl-CW</option>
<option>nl-SR</option>
<option>nl-SX</option>
<option>pa</option>
<option>pa-Guru</option>
<option>pl</option>
<option>pt</option>
<option>pt-AO</option>
<option>pt-CV</option>
<option>pt-GW</option>
<option>pt-MO</option>
<option>pt-MZ</option>
<option>pt-PT</option>
<option>pt-ST</option>
<option>pt-TL</option>
<option>ro</option>
<option>ro-MD</option>
<option>root</option>
<option>ru</option>
<option>ru-BY</option>
<option>ru-KG</option>
<option>ru-KZ</option>
<option>ru-MD</option>
<option>ru-UA</option>
<option>si</option>
<option>sk</option>
<option>sl</option>
<option>sq</option>
<option>sq-MK</option>
<option>sq-XK</option>
<option>sr</option>
<option>sr-Cyrl</option>
<option>sr-Cyrl-BA</option>
<option>sr-Cyrl-ME</option>
<option>sr-Cyrl-XK</option>
<option>sr-Latn</option>
<option>sr-Latn-BA</option>
<option>sr-Latn-ME</option>
<option>sr-Latn-XK</option>
<option>sv</option>
<option>sv-AX</option>
<option>sv-FI</option>
<option>sw</option>
<option>sw-CD</option>
<option>sw-KE</option>
<option>sw-UG</option>
<option>ta</option>
<option>ta-LK</option>
<option>ta-MY</option>
<option>ta-SG</option>
<option>te</option>
<option>th</option>
<option>to</option>
<option>tr</option>
<option>tr-CY</option>
<option>uk</option>
<option>ur</option>
<option>ur-IN</option>
<option>uz</option>
<option>uz-Latn</option>
<option>vi</option>
<option>zh</option>
<option>zh-Hans</option>
<option>zh-Hans-HK</option>
<option>zh-Hans-MO</option>
<option>zh-Hans-SG</option>
<option>zh-Hant</option>
<option>zh-Hant-HK</option>
<option>zh-Hant-MO</option>
<option>zu</option>
</select>
<span id="exampleFormats" style="display: inline;">A number may look like this: 11,7 and a date may look like this: 6‏/10‏/2015</span>
<span id="loading" style="display: none;">Loading...</span>
</div>
<div class="row">
<label for="Double">Double</label>
<input data-msg-number="The field Double must be a number." data-msg-range="The field Double must be between 10.5 and 20.3." data-msg-required="The Double field is required." data-rule-number="true" data-rule-range="[10.5,20.3]" data-rule-required="true" id="Double" name="Double" type="text" value="0" aria-required="true">
</div>
<div class="row">
<label for="DateTime">DateTime</label>
<input data-msg-date="The field DateTime must be a date." data-msg-required="The DateTime field is required." data-rule-date="true" data-rule-required="true" id="DateTime" name="DateTime" type="text" value="" aria-required="true">
</div>
<div class="row">
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-info">Reset</button>
</div>
</form>
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/Scripts/jquery.js"></script>
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/Scripts/bootstrap.js"></script>
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/Scripts/jquery.validate.js"></script>
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/cldrjs/dist/cldr.js"></script>
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/cldrjs/dist/cldr/event.js"></script>
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/cldrjs/dist/cldr/supplemental.js"></script>
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/globalize/dist/globalize.js"></script>
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/globalize/dist/globalize/number.js"></script>
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/globalize/dist/globalize/date.js"></script>
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/Scripts/jquery.validate.globalize.js"></script>
<script>
function getJsonFilenames(locale, loadedData) {
return [
"supplemental/likelySubtags.json",
"main/{locale}/numbers.json",
"supplemental/numberingSystems.json",
"main/{locale}/ca-gregorian.json",
"main/{locale}/timeZoneNames.json",
"supplemental/timeData.json",
"supplemental/weekData.json",
"main/{locale}/languages.json"
].filter(function (f) {
var noDataLoaded = loadedData.length === 0;
if (noDataLoaded) {
return true;
}
var localeNotYetLoaded = loadedData.indexOf(locale) === -1;
if (localeNotYetLoaded) {
var fileIsCommonAndSoAlreadyLoaded = f.indexOf("supplemental/" !== -1);
return fileIsCommonAndSoAlreadyLoaded;
}
return false;
}).map(function (f) { return "https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/cldr-data/" + f.replace("{locale}", locale); });
}
function loadLocale(locale, loadedData) {
var promise = $.Deferred();
var jsonToLoad = getJsonFilenames(locale, loadedData);
if (jsonToLoad.length === 0) {
Globalize.locale(locale); // Presumably already loaded
promise.resolve(locale + " selected...")
return promise;
}
return $.when.apply(
this, jsonToLoad.map($.get)
).then(function () {
// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply(arguments, [0]).map(function (result) {
return result[0];
});
}).then(Globalize.load).then(function () {
loadedData.push(locale);
Globalize.locale(locale);
return locale + " loaded and selected..."
});
}
var localesLoaded = [];
$("form").validate({
submitHandler: function (form) {
alert("This is a valid form!");
}
});
$("#localeSelector").change(function () {
var $this = $(this);
var $exampleFormats = $("#exampleFormats");
var $loading = $("#loading");
$this.prop("disabled", true);
$loading.show();
$exampleFormats.hide();
var localeToLoad = $this.val();
loadLocale(localeToLoad, localesLoaded)
.then(function (result) {
$this.prop("disabled", false);
$loading.hide();
var languageName = Globalize.locale().main('localeDisplayNames/languages/' + localeToLoad);
languageName = (languageName
? languageName + ' / ' + Globalize.locale('en').main('localeDisplayNames/languages/' + localeToLoad) + ' : '
: '');
var exampleFormats = languageName + "A number may look like this: " + Globalize.numberFormatter()(11.7) +
" and a date may look like this: " + Globalize.dateFormatter()(new Date());
$exampleFormats.text(exampleFormats).show();
}, function (error) {
$exampleFormats.text("Problem loading locale: " + error).show();
$this.prop("disabled", false);
$loading.hide();
});
}).change();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment