カレンダーアイコン付き日付入力
ブラウザ標準の input type=date を、サイトの雰囲気に合わせて整えた日付入力欄です。土台が標準部品なので、クリックするとブラウザ純正のカレンダーが開き、JavaScript は不要です。装飾は CSS だけで、ラベルと入力欄を縦に並べ、フォーカス時に枠色を変えています。
解説
ブラウザ標準の input type=date を、サイトの雰囲気に合わせて整えた日付入力欄です。土台が標準部品なので、クリックするとブラウザ純正のカレンダーが開き、JavaScript は不要です。装飾は CSS だけで、ラベルと入力欄を縦に並べ、フォーカス時に枠色を変えています。ポイントは ::-webkit-calendar-picker-indicator に filter を当て、右端のカレンダーアイコンの色をブランド寄りの紫に染めている点です。
使う場面
- 予約フォームの来店日・宿泊日の指定
- 申込・問い合わせの希望日入力
- 記事やイベントの公開日の選択
標準部品を使うと、スマホでは OS のネイティブな日付ピッカーが出るため、操作に迷いにくく実装も軽量です。アイコンの色は filter の数値で調整でき、別の色にしたいときはここを書き換えます。注意として、カレンダーの細かな見た目はブラウザごとに差があるため完全な統一はできません。入力可能な範囲を絞りたい場合は min と max 属性で過去日や先の日付を制限できます。ラベルを label で結びつけているので、クリック範囲が広くアクセシビリティ面でも素直です。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
JavaScript なしで動きますか。
動きます。ブラウザ標準の日付入力をそのまま使っているため、クリックでカレンダーが開く挙動は CSS だけで成立します。スクリプトの読み込みは不要です。
選べる日付を限定できますか。
input に min と max 属性を付ければ範囲を制限できます。たとえば今日以降だけ選ばせたい予約フォームなら、min に当日の日付を入れると過去日を弾けます。