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にて公開しています。実装時の参考にしてください。
コメントは受け付けていません。