hifiveとjQuery UIを組み合わせる【日付ピッカー】

hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。

今回は日付ピッカーです。

デモコードについて

実際に動作するデモはJSFiddleにアップロードしてあります。テキストボックスをクリックすると日本語で日付ピッカーが表示されて、任意の日付を選択するとテキストボックスに入力されます。

実装方法について

読み込むべきライブラリはjQuery/jQuery UI/hifiveになります。

そしてHTMLは次のようになります。テキストボックスをひとつ配置します。idは任意の文字列です。

JavaScriptからの呼び出し方です。最初に日付ピッカーの設定を作成します。

後は hifive の __ready イベントの中で日付ピッカーを呼び出します。これで完了です。

日付ピッカーについては通常のjQueryで使うように利用できます。

今回の実装デモはJSFiddleにて公開しています。実装時の参考にしてください。