Rome

お問い合わせや申込フォームなどで、日付を入力してもらうことも多いと思います。そんなときに、カレンダーで日付をピックしてもらうようにすると大変便利ですよね。

そんなときに便利なのが、このカレンダーライブラリー「Rome」です。

サンプルを作ってみました。

フォームの日付入力に便利。カレンダーで日付ピッカー「Rome」サンプル

日付だけでなく、時間との組み合わせ、または時間のみの入力も可能です。構成は2ファイルのみで、jQueryがなくても動きます。

使用方法は続きをどうぞ。


【使用方法】
まずはこちらのRomeのGitHubのサイトからファイル一式ダウンロードします。右側にある「Download ZIP」からデモを含むZIPファイルを利用するとわかりやすいと思います。

ダウンロードするといろいろなファイルがゴチャゴチャとありますが、使用するのは、rome.cssとrome.jsで基本OKデス。

<head>内で、rome.cssを読み込ませます。(パスに注意)

<body>の好きな場所に、入力エリアを設置します。

そして、以下を</body>直前に記述しましょう。(パスに注意)

はい、これだけで完成です!!

オプションも色々あるので、用途にあわせて設定してみてはいかがでしょうか?

オプションについては、本家のデモがわかりやすいかと。

最後に、サンプルのソースを書いておきます。どうぞご参考まで。(サンプルでは、時間を表示させず、日付のみを表示させています。)

この記事と関連してると思われる記事: