ユーザーが日付を入力する必要がある場合、開発者は入力タイプの日付の事前定義/デフォルト値を現在/今日の日付に設定します。これで、ユーザーは日付を手動で入力する必要がなくなり、その意味でユーザーの時間と労力が節約されます。さらに、ユーザーエクスペリエンスとデータの正確性が向上し、ユーザーの利便性が向上します。イベント管理システムや予約システムなど、さまざまなアプリケーションが搭載されています。
このブログでは、入力タイプの日付のデフォルト値を今日に設定する方法を示します。
方法 1: 「valueAsDate」プロパティを使用する
” 日付としての値 ” プロパティは、” を通じて現在の日付を取得するために利用されます。 日にち（） ' 関数。この関数は、現在の日付の取得、特定の日付の設定、日付の操作など、日付に対してさまざまな操作を実行するために使用されます。
より深く理解するには、以下のコードにアクセスしてください。
< 体 >
< ディビジョン >
< ラベル ために = 「今日の日付」 > 日付は ラベル >< 入力 タイプ = '日にち'
ID = 「今日の日付」 >
ディビジョン >
< 脚本 >
document.getElementById ( 「今日の日付」 ) .valueAsDate = 新しい日付 ( ) ;
脚本 >
体 >
上記のコード スニペットでは次のようになります。
- まず、「 <入力> ”タグは”を持って作成されます タイプ ' と ' ID 「」属性が「」に設定されました データ ' と ' 今日の日付 ' それぞれ。この「 」タグはブログ全体で使用されます。
- 次に、「」の内部 <スクリプト> ” というIDを持つHTML要素をタグ付けします。 今日の日付 」を「」で選択します。 getElementById() ' 方法。
- その後、「 日付としての値 ” プロパティは、新しい “ のインスタンスとして割り当てられ、保存されます。 日にち（） 」コンストラクター。
上記のコード スニペットを実行すると、Web ページは次のようになります。
出力は、入力タイプのデータのデフォルト値が現在/今日の日付に設定されていることを示しています。
方法 2: 「toISOString()」メソッドを使用する
今日のデフォルト値を設定するには、「 入力 ” 要素を今日/現在の日付に変更します。 ” toISOString() 」メソッドを利用することもできます。より詳しい説明については、以下のコード スニペットを参照してください。
< 脚本 >const today = 新しい日付 ( ) .toISOString ( ) .substr ( 0 、 10 ) ;
document.getElementById ( 「今日の日付」 ) .value = 今日;
脚本 >
上記のコード スニペットでは次のようになります。
- まず、「」の新しいインスタンスです。 日にち（） ” コンストラクターが作成されます。その後、日付のインスタンスを「」に変換します。 ISO 「」を使用した標準 toISOString() ' 方法。
- 次に「」を活用します。 部分文字列() ” のインデックス番号を取得するメソッド 0 ' と ' 10 ”をパラメータとして指定します。その後、「」から結果を表示します。 0 「」へのインデックス 10 ' 索引。
上記のメソッドを実行すると、Web ページは次のように表示されます。
出力は、入力タイプのデータのデフォルト値が現在/今日の日付に設定されていることを示しています。
方法 3: 「getFull Year()」メソッドと「padStart()」メソッドを使用する
このセクションでは、「 getFull Year() 」メソッドは現在の日付を抽出します。 ” パス開始() 」メソッドが使用され、「 日にち 対象となる「」に表示される形式 入力 ' エレメント：
< 脚本 >定数 現在 = 新しい日付 ( ) ;
const current-year = current.getFull Year ( ) ;
const current-month = 文字列 ( current.getMonth ( ) + 1 ) .padStart ( 2 、 「0」 ) ;
const 現在日 = 文字列 ( current.getDate ( ) ) .padStart ( 2 、 「0」 ) ;
const formattedDate = ` ${今年} - ${当月} - ${当日} ` ;
const myDateInput = document.getElementById ( '私の日付' ) ;
myDateInput.value = formattedDate;
脚本 >
上記のコード スニペットの説明を箇条書きで説明します。
- まず、「」のオブジェクトを格納する定数型の変数を作成します。 日にち（） ” という名前のコンストラクター” 現在 ”。
- 次に「」を活用します。 getFull Year() ” を使用したメソッド 現在 ” 変数を作成し、それを “” という名前の新しい変数に保存します。 今年の ”。
- 次に、「」を渡します。 getMonth() 」メソッドを作成し、「」内に月を開始する 1 ～ 12 の数字を 1 つ追加します。 弦（） 」コンストラクター。また、「」を利用して 2 文字のパディングを提供します。 パス開始(2, 0) ”。そして、それを「」という名前の新しく作成した変数に配置します。 今月 ”。
- 次に、同じプロセスに従って、「」を使用して現在の日付を取得します。 getDate() ”メソッドを作成し、”に保存します。 現在の ' 変数。
コード スニペットを実行すると、それぞれの Web ページは次のように表示されます。
出力は、入力タイプのデータのデフォルト値が現在/今日の日付に設定されていることを示しています。
結論
入力タイプの日付のデフォルト値を今日/現在の日付に設定するには、「 日付としての値 ” プロパティ、” toISOString() ' と ' getFull Year() 」の方法を活用することができます。 「valueAsDate」プロパティの場合、「」のみ 日にち（） ” の場合はコンストラクターが必要です。 toISOString() ” メソッドは” 部分文字列() 」メソッドは、日付の特定の部分のみを取得するために利用されます。このブログでは、入力タイプの日付のデフォルト値を today/current に設定する方法を示します。