日程を入力するフォームでカレンダーから入力させる方法は？

今回はフォームで日付を入力する際にカレンダーを表示させ、ユーザーのアシストをする機能を紹介しますので、参考にしてみてください。

本当にシンプルなので、さっそくカレンダーの出るフォームをーー、

See the Pen
XWWYBLv by sank (@sank_f)
on CodePen.

こんな感じになりました。

どうですか、カレンダーは出てくるでしょうか。

やり方は簡単で、

コメントアウトで書きましたが、type=”date”を設定するだけで、カレンダーが出てきました。

さらに応用になりますが、カレンダーの日程を指定することも可能。

See the Pen
NWWzLqB by sank (@sank_f)
on CodePen.

どうでしょうか、指定できない日程がグレーアウトしました。

ソースは、

こんな感じで、inputタグに「 min=”2019-11-09″ max=”2019-11-11″」を指定するだけ！

今回は2019年11月9日～11日までのみ指定を可能にしました。

フォームってだけで面倒くさいので、できる限りユーザーファーストのフォームを作りたいですよね。