コンテンツへスキップ

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

by : 2017/05/11

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

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

デモコードについて

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

実装方法について

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

<!– スタイルシート –>
<link rel="stylesheet" type="text/css" href="https://code.htmlhifive.com/h5.css"&gt;
<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"&gt;
<!– 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&gt;
<script type="text/javascript" src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script&gt;
<script type="text/javascript" src="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/jquery-ui-1.9.1.custom.min.js"></script&gt;

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

<div id="container">
<input type="text" id="datepicker" value="" />
</div>

view raw
index.html
hosted with ❤ by GitHub

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

let data = {
closeText: '閉じる', prevText: '&#x3c;前', nextText: '次&#x3e;',
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']);

view raw
index.html
hosted with ❤ by GitHub

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

$(function(){
var controller = {
__name: 'DatepickerController',
__ready: function() {
$('#datepicker').datepicker();
}
};
// コントローラの作成と要素へのバインド.
h5.core.controller('#container', controller);
});

view raw
index.js
hosted with ❤ by GitHub

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


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

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。