1

<input type="date">で、画面上で年のみ入力した状態で、ボタンイベントを発火した際に、
画面上に入力中の年の情報を取得する方法はありますでしょうか?

具体的には、以下画像の状態で、messageボタンを押下した際に、「2020」という値を取得する方法が知りたい内容です。
画像の説明をここに入力

ブラウザのデバッガにて、<input type="date">のデータを参照していますがそれらしき値が見つけられず、
過去質問も参照してみたのですが、探し方が悪かったのか見つけられず、今回質問したところになります。

<!DOCTYPE html>

<head>
<script>

function clickdate() {
    const elm = document.querySelector("#date");
    console.log(elm.value); // ←ここで2020を取得したい、valueは年月日すべてが確定した状態でなければ値が取得できない模様
}

</script>
</head>
<body>

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

<button onClick="clickdate()">message</button>

</body>

</html>

1 件の回答 1

0

HTML Living Standard によれば、値が無効な日付である場合、 value プロパティの値は空文字列となります[1]。このため、無効な日付の値を取得することは出来ません。単にそれが無効な値かどうか、などの判定は ValidityState.badInput プロパティを用いて行えます[2]

§ 4.10.5.1.7 Date state (type=date)[1]

The value attribute, if specified and not empty, must have a value that is a valid date string.

The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.

解決策として、 input 要素の type 属性に date ではなく text を使用し、すべてを JavaScript で制御するという方法があります。これは大変な作業ですが、適宜 datepicker 系のライブラリを使用することで負担を軽減出来ます。

1
  • 回答ありがとうございます。type=textを使用し、Javascriptで制御する方向で考えます。
    – user41913
    Commented 2020年9月16日 4:55

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。