[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="repeatButtons" 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', {
  repeatButtons: true
});
var inputDate = new wijmo.input.InputDate('#inputDate', {
  repeatButtons: true
});

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