Skip to content

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

by : 2017/06/14

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

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

使い方

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

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

選択モード

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

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

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

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


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

From → hifive

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

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