コンテンツへスキップ

カレンダー表示を行うカレンダーコンポーネント(その3)「日付の選択モードを変更する」

by : 2017/06/14

カレンダーコンポーネントの使い方、第三弾です。今回はカレンダーの日付選択方式を変更します。

実際に動いているデモはこちらにあります。

使い方

HTMLは次のようになります。選択方式の3パターンを設定できるようにしただけです。

<div id="container"></div>
<p>
<input type="radio" class="select" name="select" value="single" /> 一日ごとの選択 <br />
<input type="radio" class="select" name="select" value="continue" /> 連続選択 <br />
<input type="radio" class="select" name="select" value="multi" /> 複数日付 <br />
</p>

view raw
gistfile1.txt
hosted with ❤ by GitHub

JavaScriptは次のようになります。ラジオボタンの選択した値をそのまま適用しています。

$(function(){
var mainController = {
__name : 'h5.ui.container.MainController',
calendarController: h5.ui.components.Calendar,
__meta : {
calendarController: {
rootElement: '#container'
},
},
__init: function(){
this.$find(".select:first").attr("checked", true);
},
'.select click': function(context, $el) {
this.calendarController.setSelectMode($el.val());
},
};
h5.core.controller('body', mainController);
});

view raw
index.html
hosted with ❤ by GitHub

選択モード

選択モードは全部で3つあります。まずデフォルトの1日選択モードです。

次に2回クリックすると、その間の日付をすべて選択状態にするモードです。

最後に複数の日付を選択できるモードです。

それぞれ必要に応じて使い分けられます。


ホテルや旅行の場合、一気に複数の日付を選択できるのが便利です。複数日付の選択もよく使われる方法です。業務要件に合わせて最適なものを設定してください。

From → hifive

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

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