新元号「令和」

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<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/cultures/wijmo.culture.ja.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/wijmo.grid.min.js"></script>
<div class="container">

  <h1>新元号</h1>
  <p>新元号「令和」に対応しました。</p>
  <h2>カレンダー</h2>
  <div class="flex-panel">
    <div id="calendar1"></div>
    <div id="calendar2"></div>
    <div id="calendar3"></div>
  </div>
  <h2>グリッド</h2>
  <div id="flexGrid"></div>

</div>

CSS

.wj-calendar {
  width: 300px;
}
.flex-panel {
  display: flex;
  flex-wrap: wrap;
}
body {
  margin-bottom: 50px;
}

JavaScript

var calendar1 = new wijmo.input.Calendar('#calendar1', {
  value: new Date(2019, 4, 1),
  formatYearMonth: 'gggyy年M月',
  formatYear: 'gggyy年',
});
var calendar2 = new wijmo.input.Calendar('#calendar2', {
  value: new Date(2019, 4, 1),
  formatYearMonth: 'ggyy年M月',
  formatYear: 'ggyy年',
});
var calendar3 = new wijmo.input.Calendar('#calendar3', {
  value: new Date(2019, 4, 1),
  formatYearMonth: 'gyy年M月',
  formatYear: 'gyy年',
});
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: [{ date: new Date(2019, 4, 1) }],
  columns: [
    { binding: 'date', header: '和暦（完全名）', format: 'gggyy年M月d日', width: 150 },
    { binding: 'date', header: '和暦（省略名漢字）', format: 'ggyy年M月d日', width: 150 },
    { binding: 'date', header: '和暦（省略名英字）', format: 'gyy年M月d日', width: 150 }
  ],
});