hifiveとjQuery UIを組み合わせる【日付ピッカー】
hifiveは業務システム開発に特化しているのでjQuery UIやBootstrapと組み合わせて使われることが多くなっています。そこで今回はよく使われるライブラリについて、その組み合わせ方を紹介します。
今回は日付ピッカーです。
デモコードについて
実際に動作するデモはJSFiddleにアップロードしてあります。テキストボックスをクリックすると日本語で日付ピッカーが表示されて、任意の日付を選択するとテキストボックスに入力されます。
実装方法について
読み込むべきライブラリはjQuery/jQuery UI/hifiveになります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– スタイルシート –> | |
| <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は任意の文字列です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="container"> | |
| <input type="text" id="datepicker" value="" /> | |
| </div> |
JavaScriptからの呼び出し方です。最初に日付ピッカーの設定を作成します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 イベントの中で日付ピッカーを呼び出します。これで完了です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| var controller = { | |
| __name: 'DatepickerController', | |
| __ready: function() { | |
| $('#datepicker').datepicker(); | |
| } | |
| }; | |
| // コントローラの作成と要素へのバインド. | |
| h5.core.controller('#container', controller); | |
| }); |
日付ピッカーについては通常のjQueryで使うように利用できます。
今回の実装デモはJSFiddleにて公開しています。実装時の参考にしてください。
hifive開発者ブログ 
コメントは受け付けていません。