スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

カレンダーで日付入力ができるjQuery Date Inputが便利

入力フォームに日付の項目がある場合、少しでもわかりやすくするためにいろいろと工夫が必要です。そこで、カレンダーから日付を選択するjQueryのプラグインを探していたら、なかなかいい物が見つかったのでメモ。

Date Input

カレンダーを表示するものはいくつかあるけど、日付をクリックするとそのまま入力フォームに値がセットされ、ちょっとしたカスタマイズならすぐにできるもので探すと、「jQuery Date Input」がぴったり。

デモはこちら。


まず、jQuery Pluginsより必要なデータをダウンロードして読み込みます。
<script type="text/javascript" src="jquery.date_input.js">
<link rel="stylesheet" href="date_input.css" type="text/css" />

次に、日付を入力するフォームにIDを振ります。
<input type="text" id="date_example" value="" />

そしてdate_inputでカレンダーをセット。
$(function() {
    $('#date_example').date_input();
})

これで入力フォームにフォーカスするとカレンダーが表示され、日付をクリックすると値がセットされます。デフォルトでは表記は英語で、セットされる値は「3 Dec 2009」の形式になっていますが、これは変更が可能。

カレンダーの表記を日本語にするには、date_input()でカレンダーを表示する前に、設定を変更します。
$(function() {
    $.extend(DateInput.DEFAULT_OPTS, { month_names: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"] });
    $.extend(DateInput.DEFAULT_OPTS, { short_month_names: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"] });
    $.extend(DateInput.DEFAULT_OPTS, { short_day_names: ["日", "月", "火", "水", "木", "金", "土"] });
    $.extend(DateInput.DEFAULT_OPTS, { start_of_week: 0 });

    $('#date_example').date_input();
})
start_of_weekはデフォルトが1で月曜はじまりになっているので、0にして日曜はじまりに変更が可能。

日付をクリックしてセットする値の形式は、jquery.date_input.jsの230行目にあるdateToStringを修正。
dateToString: function(date) {
    return date.getFullYear() + "." + this.short_month_names[date.getMonth()] + "." + date.getDate();
},
これで「2009.12.3」の形式でセットされます。


カレンダーの見た目はCSSで変更できますが、このままでもシンプルでカッコいいですねー。
ちなみに、ライセンスはMIT licenseとのこと。「jQuery Date Input」でご確認ください。


個人的にはこれがしっくりきましたが、「日付入力のためのjQueryプラグイン 10選」で他にもいろいろ紹介されています。

関連するエントリー
画像のaltをかっこよく表示するCaptify.js

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。