日本語にも対応したカレンダー&Dateピッカー「Ion Calendar」

「Ion Calendar」は英語、ロシア語、日本語の3カ国語に対応したカレンダーとDateピッカーを実装するjQueryプラグインです。

Ion Calendar

ion-calendar

 

この手のプラグインはたくさんあると思いますが、日本語にも対応しているものは珍しいのではないでしょうか。またUIも操作性が高く良いです。クロスブラウザ対応がされていて、IEはIE8以上をサポートしています。またスマホからのタッチ操作にも対応しているとのことです。

 

このようなカレンダーです。右側に表示されていますが、日付と時刻まで取得できています。

ion-calendar-demo-1

 

こちらはDateピッカー。inputタグにフォーカスがあたるとカレンダーが表示され、選んだ日付が書き込まれます。

ion-calendar-demo-2

 

 

それでは「Ion Calendar」の実装方法をご紹介します。まずはjQueryとMoment.jsを含む外部ファイルを読み込みます。ダウンロードすると一式含まれています。

<link rel="stylesheet" href="./css/ion.calendar.css">
<script src="./js/vendor/jquery-1.10.1.min.js"></script>
<script src="./js/ion-calendar/moment.min.js"></script>
<script src="./js/ion-calendar/moment.ja.js"></script>
<script src="./js/ion-calendar/ion.calendar.min.js"></script>

 

HTMLはこのようにマークアップします。今回は結果出力のために”id=result”でdiv要素を用意しました。

<div class="myCalendar" id="myCalendar-1"></div>
<div id="result"></div>

 

CSSはこのように指定します。カレンダーの横幅は300pxくらいがちょうどよいです。

.myCalendar {
  width: 300px;
}

 

JavaScriptはこのように実装します。オプションはリンク先よりご確認ください。他にもいくつかあります。

$("#myCalendar-1").ionCalendar({
  lang: "ja",
  sundayFirst: true,
  years: "20",
  format: "LLLL",
  onClick: function(date){
    $('#result').text(date);
  }
});

 

するとこのように作ることができました。

ion-calendar-sample

 

とても簡単に作れます。日本語にも対応しているので、社内イントラシステムなんかにも使えそうですね。参考にどうぞ。

 

Home > JavaScript > 日本語にも対応したカレンダー&Dateピッカー「Ion Calendar」

Return to page top