70426


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

具体的には、以下画像の状態で、messageボタンを押下した際に、「2020」という値を取得する方法が知りたい内容です。  
[![画像の説明をここに入力](https://i.stack.imgur.com/43Hi1.png)](https://i.stack.imgur.com/43Hi1.png)

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

[code]

    <!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>
    
[/code]


CC BY-SA 4.0
2020-09-16T00:49:12.123
70424
2020-09-16T10:34:07.167
2020-09-16T01:00:23.890
32986
41913
question
javascript html html5
<input type="date">に入力中の値を取得することは出来ないのでしょうか


HTML Living Standard によれば、値が無効な日付である場合、 `value` プロパティの値は **空文字列**
となります[[1]](https://html.spec.whatwg.org/multipage/input.html#date-
state-\(type%3Ddate\))。このため、無効な日付の値を取得することは **出来ません** 。単にそれが無効な値かどうか、などの判定は
`ValidityState.badInput`
プロパティを用いて行えます[[2]](https://html.spec.whatwg.org/multipage/form-control-
infrastructure.html#dom-validitystate-badinput)。

> ### § 4.10.5.1.7 Date state
> (`type=date`)[[1]](https://html.spec.whatwg.org/multipage/input.html#date-
> state-\(type%3Ddate\))
>
> 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 系のライブラリを使用することで負担を軽減出来ます。


CC BY-SA 4.0
2020-09-16T02:06:12.850
70426
2020-09-16T10:34:07.167
2020-09-16T10:34:07.167
32986
32986
70424
answer