[全般] 新しいカルチャー

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<div class="container">

  <label>カルチャー
    <div id="culture"></div>
  </label>
  <h4>日付</h4>
  <pre id="date"></pre>
  <h4>通貨</h4>
  <pre id="currency"></pre>

</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

var date = new Date();
var number = 1234.5;
function update() {
  document.getElementById('date').innerText = wijmo.Globalize.format(date, 'D');
  document.getElementById('currency').innerText = wijmo.Globalize.format(number, 'c');
}
update();

var culture = new wijmo.input.ComboBox('#culture', {
  displayMemberPath: 'name',
  itemsSource: [
    { name: '日本語', key: 'ja' },
    { name: 'ドイツ語（スイス）', key: 'de-CH' },
    { name: 'ベトナム語', key: 'vi' },
    { name: 'モンゴル語', key: 'mn-MN' },
  ],
  selectedIndexChanged: function(s, e) {
    var url = 'https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.' + s.selectedItem.key + '.min.js';
    var scripts = document.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
      var script = scripts[i];
      if (script.src.indexOf('/cultures/wijmo.culture.') > -1) {
        script.parentElement.removeChild(script);
        script = document.createElement('script');
        script.onload = update;
        script.src = url;
        document.head.appendChild(script);
        break;
      }
    }
  }
});