【jQuery コーディング練習】番外編：プラグイン「Datepicker」／カレンダー&入力チェック

目次

• コーディング練習課題
  • 課題内容
  • デザインイメージ
  • コーディング仕様
• コーディングをはじめよう！
  • ①「模写コーディング」に挑戦する
    • デモサイト
    • コーディングのヒント（レイアウト構成）
    • コーディング例（ソースコード）
    • 参考（模写コーディングの手順）
  • ②「デザインカンプからのコーディング」に挑戦する
    • デザインカンプ
    • コーディングのヒント（レイアウト構成）
    • コーディング例（ソースコード、デモサイト）

コーディング練習課題

課題内容

プラグイン「Datepicker」を使用してカレンダー機能のある入力フォームを作ります。申し込みボタン押下時に必須チェックを行い、未入力の項目があれば項目下にエラーメッセージを表示します。

デザインイメージ

▼PC表示

▼スマホ表示

コーディング仕様

コンテンツ幅

横幅は1000pxで、横のパディングは10pxです。

予約日

プラグイン「Datepicker」を使用してカレンダー機能を実装します。

受講形式

ラジオボタンを切り替えた際に、下のテキストも連動して切り替わるようにします。

入力チェック

「上記の内容で申し込む」ボタンを押した際に、未入力の項目の下にエラーメッセージを表示します。

レスポンシブ

ブレークポイントは600pxに設定します。

プラグインの読み込み

以下のファイルを読み込みます。
・jquery-ui.min.js
・jquery.ui.datepicker-ja.min.js

ファイルの読み込み方や使い方は、各自調べながらカレンダーを実装してみてください。

コーディングをはじめよう！

コーディング練習は、下記の2つからお選びいただけます。

• ①模写コーディング：デモサイトを見ながら同じサイトを作る
• ②デザインカンプからのコーディング：デザインデータをもとにサイトを作る

①「模写コーディング」に挑戦する

デモサイトをもとに、模写コーディングに挑戦してみましょう！

②「デザインカンプからのコーディング」に挑戦する

デザインカンプからのコーディングに挑戦してみましょう！