[Calendar][InputDate] 年ピッカー

by Wijmo5_jp

HTML

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

  <h1>年ピッカー</h1>
  <p>年月カレンダーで年をクリックすると、ドロップダウンリストから年を選択できます。</p>
  <label><input id="showYearPicker" type="checkbox" checked> 年ピッカーを表示</label>
  <div id="calendar"></div>
  <div id="inputDate"></div>

</div>

CSS

#calendar {
  width: 300px;
}

JavaScript

var calendar = new wijmo.input.Calendar('#calendar', {
  showYearPicker: true
});
var inputDate = new wijmo.input.InputDate('#inputDate', {
  showYearPicker: true
});

document.getElementById('showYearPicker').addEventListener('change', function(e) {
  calendar.showYearPicker = e.target.checked;
  inputDate.showYearPicker = e.target.checked;
});