Skip to content

カレンダー表示を行うカレンダーコンポーネント(その4)「日付を選択できない状態にする」

by : 2017/06/19

カレンダーコンポーネントの使い方、第四弾です。今回はカレンダーの日付を選択できない状態に変更します。

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

使い方

HTMLは次のようになります。ステータスを変更するためのボタンを追加しています。

JavaScriptは次のようになります。選択されている日付を取得し、それを setSelectable に渡しています。

解除する場合には、予め無効にした日付を変数に入れておき、それを setSelectable(dates, true) とすればOKです。


予約の埋まった日付をサーバから取得したり、動的に変更したい場合に便利です。お店のお休みであったり、営業外の日を設定するなど様々な使い方が考えられるでしょう。

From → hifive

コメントする

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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