Skip to content

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

by : 2017/06/14

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

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

使い方

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

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

選択モード

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

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

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

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


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

From → hifive

コメントする

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

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