hifiveとjQuery UIを組み合わせる【日付ピッカー】
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回は日付ピッカーです。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。テキストボックスをクリックすると日本語で日付ピッカーが表示されて、任意の日付を選択するとテキストボックスに入力されます。
実装方法について
読み込むべきライブラリはjQuery/jQuery UI/hifiveになります。
| <!– スタイルシート –> | |
| <link rel="stylesheet" type="text/css" href="https://code.htmlhifive.com/h5.css"> | |
| <link rel="stylesheet" type="text/css" href="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/smoothness/jquery-ui-1.9.1.custom.min.css"> | |
| <!– JavaScript –> | |
| <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script> | |
| <script type="text/javascript" src="https://code.htmlhifive.com/ejs-h5mod.js"></script> | |
| <script type="text/javascript" src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script> | |
| <script type="text/javascript" src="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/jquery-ui-1.9.1.custom.min.js"></script> |
そしてHTMLは次のようになります。テキストボックスをひとつ配置します。idは任意の文字列です。
| <div id="container"> | |
| <input type="text" id="datepicker" value="" /> | |
| </div> |
JavaScriptからの呼び出し方です。最初に日付ピッカーの設定を作成します。
| let data = { | |
| closeText: '閉じる', prevText: '<前', nextText: '次>', | |
| currentText: '今日', weekHeader: '週', dateFormat: 'yy/mm/dd', | |
| firstDay: 0, isRTL: false, showMonthAfterYear: true, yearSuffix: '年', | |
| monthNames: [], monthNamesShort: [], dayNames: [], | |
| dayNamesShort: [], dayNamesMin: [] | |
| }; | |
| // 日付の作成（1〜12月） | |
| for (let i = 1; i <= 12; i++) { | |
| data.monthNames.push(`${i}月`); | |
| data.monthNamesShort.push(`${i}月`); | |
| } | |
| // 曜日の作成（日〜土曜日） | |
| let weekdays = ['日','月','火','水','木','金','土']; | |
| for (let index in weekdays) { | |
| data.dayNames.push(`${weekdays[index]}曜日`); | |
| data.dayNamesShort.push(weekdays[index]); | |
| data.dayNamesMin.push(weekdays[index]); | |
| } | |
| $.datepicker.regional['ja'] = data; | |
| $.datepicker.setDefaults($.datepicker.regional['ja']); |
後は hifive の __ready イベントの中で日付ピッカーを呼び出します。これで完了です。
| $(function(){ | |
| var controller = { | |
| __name: 'DatepickerController', | |
| __ready: function() { | |
| $('#datepicker').datepicker(); | |
| } | |
| }; | |
| // コントローラの作成と要素へのバインド. | |
| h5.core.controller('#container', controller); | |
| }); |
日付ピッカーについては通常のjQueryで使うように利用できます。
今回の実装デモはJSFiddleにて公開しています。実装時の参考にしてください。
コメントは受け付けていません。