日程を入力するフォームでカレンダーから入力させる方法は?
2020.01.25
今回はフォームで日付を入力する際にカレンダーを表示させ、ユーザーのアシストをする機能を紹介しますので、参考にしてみてください。
本当にシンプルなので、さっそくカレンダーの出るフォームをーー、
See the Pen
XWWYBLv by sank (@sank_f)
on CodePen.
こんな感じになりました。
どうですか、カレンダーは出てくるでしょうか。
やり方は簡単で、
1 2 3 4 5 |
<form action="DUMMY"> <div class="date">日付を入力してください:<br> <input type="date" class="date-form"> //type="date"を設定する。 </div> </form> |
コメントアウトで書きましたが、type=”date”を設定するだけで、カレンダーが出てきました。
さらに応用になりますが、カレンダーの日程を指定することも可能。
See the Pen
NWWzLqB by sank (@sank_f)
on CodePen.
どうでしょうか、指定できない日程がグレーアウトしました。
ソースは、
1 2 3 4 5 |
<form action="DUMMY"> <div class="date">日付を入力してください:<br> <input type="date" min="2019-11-09" max="2019-11-11" class="date-form"> </div> </form> |
こんな感じで、inputタグに「 min=”2019-11-09″ max=”2019-11-11″」を指定するだけ!
今回は2019年11月9日~11日までのみ指定を可能にしました。
フォームってだけで面倒くさいので、できる限りユーザーファーストのフォームを作りたいですよね。