Semantic-UIでCalendar UI

Semantic-UI-Calendarを使うと、Date Pickerが使えるようになる。

Semantic-UI-CalendarのJavaScriptとスタイルシートを読み込むようにする。

<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui-calendar/0.0.8/calendar.min.js"
        type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-calendar/0.0.8/calendar.min.css"/>

日付項目を作る。

<div class="field ui calendar required">
  <label>日付</label>
  <div class="ui input left icon">
    <i class="calendar icon"></i>
    <input type="text" name="date" placeholder="日付">
  </div>
</div>

JavaScriptを使用してカレンダーのタイプを設定する。
typeにdateを設定しているので、日付の項目となる。

$('.ui.calendar').calendar({
  type: 'date'
})

これで、画像のような日付入力欄が作成できる。


なおデフォルトのフォーマットは画像のような形になる。


フォーマットの変更は、JavaScriptを使って行う。例えば、yyyy/mm/ddにしたい場合は、このようにする。

$('.ui.calendar').calendar({
  type: 'date',
  formatter: {
    date: function (date) {
      var day = ('0' + date.getDate()).slice(-2);
      var month = ('0' + (date.getMonth() + 1)).slice(-2);
      var year = date.getFullYear();
      return year + '/' + month + '/' + day;
    }
  }
})

これで、フォーマットがyyyy/mm/dd形式になる。