CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

max属性を使ってHTMLの日付ピッカーを「今日」までに制限する方法

HTMLの日付ピッカー(<input type="date">)は、ウェブサイトやフォーム上でユーザーが特定の日付を選択できる便利な入力コントロールです。デフォルトでは過去・未来を問わず任意の日付を選択できますが、max属性を活用することで、選択可能な日付を「今日以前」に制限することができます。

基本構文

max属性には、YYYY-MM-DD形式の日付文字列を指定します。

<input type="date" max="YYYY-MM-DD">

日付ピッカーとは?

日付ピッカーとは、カレンダー形式のインターフェースからユーザーが日付を選択できるUIコンポーネントのことです。予約システムやスケジュール管理ツール、生年月日の入力フォームなど、さまざまな場面で広く利用されています。

JavaScriptで最大日付を「今日」に動的に設定する

max属性に常に「今日の日付」を指定したい場合は、JavaScriptで現在の日付をYYYY-MM-DD形式で生成し、動的に設定するのが一般的です。

HTML構造

まず、type="date"を持つ入力要素を作成します。

<input type="date" id="datepicker">

完全なサンプルコード

以下は、JavaScriptを使って選択可能な最大日付を「今日」に設定する完全な例です。

<!DOCTYPE html>
<html>
<head>
 <title>Date Picker with Max Date</title>
</head>
<body>
 <h3>Select a Date (Max: Today)</h3>
 <input type="date" id="datepicker">
 
 <script>
 const today = new Date();
 const year = today.getFullYear();
 const month = String(today.getMonth() + 1).padStart(2, '0');
 const day = String(today.getDate()).padStart(2, '0');
 const formattedDate = `${year}-${month}-${day}`;
 
 document.getElementById('datepicker').setAttribute('max', formattedDate);
 </script>
</body>
</html>

このコードを実行すると、今日の日付までしか選択できない日付ピッカーが表示されます。未来の日付は無効化され、カレンダーから選択できなくなります。

JavaScriptの処理の流れ

このスクリプトは以下の手順で動作します。

  • 現在の日付を表すDateオブジェクトを生成する
  • 年・月・日の各要素を取り出す
  • padStart()メソッドを使い、月と日に先頭ゼロを付けて2桁に整形する
  • 日付入力欄が要求するYYYY-MM-DD形式に組み立てる
  • 日付ピッカーのmax属性にその値を設定する

活用シーン

最大日付を「今日」に制限することは、以下のようなケースで特に有効です。

  • 当日または過去の日付のみ受け付ける予約システム
  • 生年月日やイベント登録フォーム
  • 未来の日付が不要なデータ収集フォーム
  • 履歴・実績などの記録入力システム

まとめ

HTMLの日付ピッカーで最大日付を「今日」に設定すれば、ユーザーが未来の日付を選択することを防げます。JavaScriptで現在の日付をYYYY-MM-DD形式で生成し、入力要素のmax属性に適用することで、リアルタイムかつ確実に日付制限を実現できます。

  1. CSSで3カラムのレイアウトグリッドを作成する方法【コード例付き】

    CSSを使って3列（3カラム）のレイアウトグリッドを作成するには、floatプロパティと幅の指定を組み合わせるのが基本的な手法です。各カラムの幅を約33%に設定して左寄せにすることで、3つの列を横並びに配置できます。以下に具体的なコード例を示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {

  2. CSSでフェードボタンを作成する方法！transitionを使った滑らかな色変化の実装

    Webサイトにアクセントを加える演出のひとつが、マウスカーソルを重ねたとき（ホバー時）に背景色がふんわりと変化する「フェードボタン」です。CSSのtransitionプロパティを使えば、JavaScriptなどに頼らず、HTMLとCSSだけで簡単に実装できます。 フェードボタンの実装コード 以下は、ホバー時に背景色と文字色がスムーズにフェードイン・フェードアウトするボタンのサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="widt