[Calendar] カレンダー書式

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>
<div class="container">

  <h3>カレンダー書式</h3>
  <p>カレンダーの年、年月、月、曜日、日の書式を変更します。</p>
  <div id="calendar"></div>
  <br>
  <div id="inputDate"></div>

</div>

CSS

#calendar {
  width: 300px;
}

JavaScript

var calendar = new wijmo.input.Calendar('#calendar', {
  monthView: false,
  formatYear: 'gggyy年',
  formatYearMonth: 'gggyy年M月',
  formatMonths: 'M月',
//  formatDayHeaders: 'dddd',
//  formatDays: 'd日',
});

var inputDate = new wijmo.input.InputDate('#inputDate', {
  format: 'gggyy年M月d日',
  calendar: {
    formatYear: 'gggyy年',
    formatYearMonth: 'gggyy年M月',
    formatMonths: 'M月',
//    formatDayHeaders: 'dddd',
//    formatDays: 'd日',
  }
});