この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
pickadate.jsというライブラリーの中で、高機能な日付カレンダーを紹介してもらったので試してみました。
アジェンダ
- ソースのダウンロード
- 実装してみる。
- 日本語表記にする
- いろいろなオプション
- まとめ
ソースのダウンロード
まずはこちらのサイトからソースをダウンロードしてきます。ファイルを展開するといろいろファイルはありますが実際に使うファイルは[lib]フォルダ内にあります。
[lib]フォルダ内は以下のファイルになります、今回は日付カレンダー用のjs、cssを使用してみます。
実装してみる
それでは実際に表示してみようと思います。今回のデモで使用したファイルになります。
css
- default.css
- default.date.css
javascript
- jquery
- picker.date.js
- legacy.js
- app.js←こちらが実際に実行するファイルです。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pickadate demo 001</title>
<link rel="stylesheet" href="./css/default.css">
<link rel="stylesheet" href="./css/default.date.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="./js/picker.js"></script>
<script src="./js/picker.date.js"></script>
<script src="./js/legacy.js"></script>
<script src="./js/app.js"></script>
</head>
<body>
<fieldset class="fieldset">
<input id="demo001" type="text" placeholder="クリックしてください">
</fieldset>
</body>
</html>$(function() {
$('#demo001').pickadate();
});実際に表示してみる
インプット要素をクリックすると日付カレンダーが表示されます。なかなかシンプルでいいですね。
日本語表記
日本語対応は、まだ残念ながら対応されていないようなので自作してみました。 lang-ja.jsファイルを作成し、app.jsの前に読み込んでおきます。
javascript
- jquery
- picker.date.js
- legacy.js
- lang-ja.js←こちら読み込みます。
- app.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pickadate demo 002</title>
<link rel="stylesheet" href="./css/default.css">
<link rel="stylesheet" href="./css/default.date.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="./js/picker.js"></script>
<script src="./js/picker.date.js"></script>
<script src="./js/legacy.js"></script>
<script src="./js/lang-ja.js"></script>
<script src="./js/app.js"></script>
</head>
<body>
<fieldset class="fieldset">
<input id="demo002" type="text" placeholder="クリックしてください">
</fieldset>
</body>
</html>lang-ja.js
jQuery.extend( jQuery.fn.pickadate.defaults, {
monthsFull: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
monthsShort: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
weekdaysFull: [ '日曜' , '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
weekdaysShort: [ '日曜' , '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
today: '本日',
clear: 'キャンセル',
format: 'yyyy年mm月dd日'
});指定オプションの説明
| オプション | 説明 |
|---|---|
| monthsFull | 月の表記を指定 |
| monthsShort |
省略された月の表記。例:April→Apr 日本語表記は省略された月表記はなし。 |
| weekdaysFull | 曜日の表記を指定 |
| weekdaysShort |
省略された曜日の表記を指定。例:Sunday→Sun 日本語表記は省略された曜日表記はなし。 |
| today | 下部の当日指定ボタンの表記。 |
| format | インプット要素のvalueに入る日付フォーマットの表記。 |
日本語表記で表示ができました。
いろいろなオプション
週始まりの指定
カレンダーの月曜始まりか日曜始まりかの指定が可能です。
$(function() {
$('セレクタ').pickadate({
firstDay: 1
});
});- 0指定の場合:日曜週始まりカレンダー指定
- 1指定の場合:月曜週始まりカレンダー指定
入力日付フォーマット指定
カレンダーからの入力フォーマットの指定が可能です。
$(function() {
$('セレクタ').pickadate({
format: 'yyyy年m月d日(ddd)'
});
});例として上記の指定をすると:xxxx年x月d日(曜日)といった表記で入力が可能です。
| オプション | 説明 | 表示サンプル |
|---|---|---|
| d | 日の表示(数値) | 1 – 31 |
| dd | 日の表示(数値) | 01 – 31 |
| ddd | 省略された曜日の表示 |
Sun – Sat(デフォルト指定) 日曜 - 土曜(上記の日本語化の場合) |
| dddd | 曜日の表示 |
Sunday – Saturday(デフォルト指定) 日曜 - 土曜(上記の日本語化の場合) |
| m | 月の表示(数値) | 1 – 12 |
| mm | 月の表示(数値) | 01 – 12 |
| mmm | 省略された月名の表示 | Jan – Dec 1月 - 12月(上記の日本語化の場合) |
| mmmm | 月名の表示 | January – December 1月 - 12月(上記の日本語化の場合) |
| yy | 2桁までの西暦を表示(数値) | 00 – 99 |
| yyyy | 西暦を表示(数値) | 2000 – 2999 |
年月のドロップダウン指定
年月の指定をドロップダウンから指定が可能です。
$(function() {
$('セレクタ').pickadate({
selectYears: true,
selectMonths: true
});
});上記以外にも、設定できる項目がこちらで紹介されています。
いろいろ試してみていただければと思います。
まとめ
シンプルな作りですが、いろいろな用途を想定した作りになっておりかなりパワフルなコンポーネントではないでしょうか。
独自に作成したテーマ等も反映できるようだったので、オリジナルテーマのカレンダーコンポーネントも作成が可能なようです。
急ぎ足でpickadate.jsのカレンダーコンポーネントをご紹介しました。