コンテンツへスキップ

カレンダー表示を行うカレンダーコンポーネント(その2)「特定の年月にジャンプする」

by : 2017/06/13

カレンダーコンポーネントの使い方、第二弾です。今回は特定の年月を指定して、その月のカレンダーを表示する方法です。

実際に動いているデモはこちらにあります。また、動いている際には次のようになります。

使い方

HTMLは年月を指定するタグを追加しただけです。


view raw
7.md
hosted with ❤ by GitHub

JavaScriptは次のようになります。入力したタイミングでsetYear/setMonthを呼び出すだけです。

$(function(){
var mainController = {
__name : 'h5.ui.container.MainController',
calendarController: h5.ui.components.Calendar,
__meta : {
calendarController: {
rootElement: '#container'
},
},
__init: function(){
var d = new Date;
this.$find("#year").val(d.getFullYear());
this.$find("#month").val(d.getMonth() + 1);
},
'#year change': function(context, $el) {
this.calendarController.setYear($el.val());
},
'#month change': function(context, $el) {
if ($el.val() != 12) {
$el.val($el.val() % 12);
}
this.calendarController.setMonth($el.val() – 1);
}
};
h5.core.controller('body', mainController);
});

view raw
index.html
hosted with ❤ by GitHub


カレンダーの移動は元々表示されている三角マークで行うか、来月または先月の日付を選択する、JavaScript側で行うかの3種類になります。JavaScriptから制御できるので、自由にカスタマイズできるでしょう。

From → hifive

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

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