76 lines
2.8 KiB
HTML
76 lines
2.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<title>Basic Globalize Compiler example (production mode)</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Basic Globalize Compiler example (production mode)</h1>
|
||
|
|
|
||
|
|
<div id="requirements">
|
||
|
|
<h2>Requirements</h2>
|
||
|
|
<ul>
|
||
|
|
<li>You need to build the `compiled-formatters.js`. Read README.md for instructions.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="demo" style="display: none">
|
||
|
|
<h2>Demo output</h2>
|
||
|
|
<p>Now: <span id="date"></span></p>
|
||
|
|
<p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
|
||
|
|
<p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
|
||
|
|
<p>A number: <span id="number"></span></p>
|
||
|
|
<p>A number (compact form): <span id="number-compact"></span></p>
|
||
|
|
<p>A currency: <span id="currency"></span></p>
|
||
|
|
<p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
|
||
|
|
<p>Messages:</p>
|
||
|
|
<ul>
|
||
|
|
<li><span id="message-0"></span></li>
|
||
|
|
<li><span id="message-1"></span></li>
|
||
|
|
<li><span id="message-2"></span></li>
|
||
|
|
<li><span id="message-3"></span></li>
|
||
|
|
</ul>
|
||
|
|
<p>Something happened: <span id="relative-time"></span></p>
|
||
|
|
<p>Speed limit: <span id="unit"></span></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Note, we don't need cldrjs library anymore because the formatters have
|
||
|
|
already been created by the compilation step. More info below.
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!-- Load Globalize runtime and its runtime modules -->
|
||
|
|
<script src="node_modules/globalize/dist/globalize-runtime.js"></script>
|
||
|
|
<script src="node_modules/globalize/dist/globalize-runtime/message.js"></script>
|
||
|
|
<script src="node_modules/globalize/dist/globalize-runtime/number.js"></script>
|
||
|
|
<script src="node_modules/globalize/dist/globalize-runtime/plural.js"></script>
|
||
|
|
|
||
|
|
<!-- Load after globalize-runtime/number.js -->
|
||
|
|
<script src="node_modules/globalize/dist/globalize-runtime/date.js"></script>
|
||
|
|
<script src="node_modules/globalize/dist/globalize-runtime/currency.js"></script>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Load after globalize-runtime/number.js and globalize-runtime/plural.js
|
||
|
|
-->
|
||
|
|
<script src="node_modules/globalize/dist/globalize-runtime/relative-time.js"></script>
|
||
|
|
<script src="node_modules/globalize/dist/globalize-runtime/unit.js"></script>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Then, load the compiled formatters.
|
||
|
|
|
||
|
|
Note, we don't need to feed Globalize on CLDR data anymore because the
|
||
|
|
formatters have already been created by the compilation step and their
|
||
|
|
"snapshots" are available below.
|
||
|
|
-->
|
||
|
|
<script src="compiled-formatters.js"></script>
|
||
|
|
|
||
|
|
<!-- Our App -->
|
||
|
|
<script>
|
||
|
|
Globalize.locale("en");
|
||
|
|
</script>
|
||
|
|
<script src="app.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|