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

Max 属性を使用して HTML 日付ピッカーを今日に制限する

HTML では、日付ピッカーは、ユーザーが Web サイトまたはフォームで特定の日付を選択できるようにする便利な入力コントロールです。デフォルトでは、日付ピッカーは任意の日付を受け入れますが、max を使用して選択可能な日付範囲を制限できます。 属性を使用して、選択を今日またはそれ以前の日付に制限します。

構文

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

日付ピッカーとは何ですか?

日付ピッカーは、ユーザーがカレンダー インターフェイスを通じて日付を選択できるようにするユーザー インターフェイス コンポーネントです。これは、予約システム、スケジュール ソフトウェア、誕生日の収集などのアプリケーションのフォームでよく使用されます。

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>

A date picker input appears that only allows selection of dates up to and including today's date. Future dates are disabled and cannot be selected.

JavaScript の仕組み

JavaScript コードは次の手順を実行します。

  • 現在の日付を表す新しい Date オブジェクトを作成します
  • 年、月、日のコンポーネントを抽出します
  • padStart() を使用して月と日を先頭にゼロを付けてフォーマットします。
  • 日付入力に必要な YYYY-MM-DD 形式に結合します
  • 日付ピッカーの最大属性を設定します

使用例

最大日付を今日に制限すると、

  • 現在または過去の日付のみを選択できる予約システム
  • 誕生日またはイベントの登録フォーム
  • 将来の日付が関係しないデータ収集フォーム
  • 履歴記録入力システム

結論

HTML 日付ピッカーの最大日付を今日に設定すると、ユーザーは将来の日付を選択できなくなります。 JavaScript を使用して今日の日付を YYYY-MM-DD 形式で動的に生成し、入力の max に適用します。 リアルタイムの日付制限の属性。

Max 属性を使用して HTML 日付ピッカーを今日に制限する


  1. CSSを使用してメールマガジンを作成するにはどうすればよいですか？

    以下は、CSSを使用してメールマガジンを作成するためのコードです- 例 <!DOCTYPE html> <html> <style> body {font-family: Arial, Helvetica, sans-serif;font-size: 20px;font-weight: bold;} h1{    text-align: center; } form {    border: 3px solid #f1f1f1;    padding: 20px;    back

  2. CSSで読み込みボタンを作成するにはどうすればよいですか？

    以下は、CSSを使用して読み込みボタンを作成するためのコードです- 例 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <meta name="viewport" content="width=device-width, initi