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

# WEB制作

2020.01.25

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

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

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日までのみ指定を可能にしました。

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

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~