カレンダーコンポーネントの使い方、第三弾です。今回はカレンダーの日付選択方式を変更します。
実際に動いているデモはこちらにあります。
使い方
HTMLは次のようになります。選択方式の3パターンを設定できるようにしただけです。
JavaScriptは次のようになります。ラジオボタンの選択した値をそのまま適用しています。
選択モード
選択モードは全部で3つあります。まずデフォルトの1日選択モードです。
次に2回クリックすると、その間の日付をすべて選択状態にするモードです。
最後に複数の日付を選択できるモードです。
それぞれ必要に応じて使い分けられます。
ホテルや旅行の場合、一気に複数の日付を選択できるのが便利です。複数日付の選択もよく使われる方法です。業務要件に合わせて最適なものを設定してください。
