読者です 読者をやめる 読者になる 読者になる

この日記は私的なものであり所属会社の見解とは無関係です。 GitHub: takahashikzn

Chromeのinput[type='date']で、不正な入力の扱いが変

HTML5


Chrome限定のお話。


Chromeの日付入力フォームの動作が解せません。
以下のHTMLを見て下さい。

<!DOCTYPE html>
<html>
    <body>
        <input type="date" value="2013-01-01" oninput="console.info(this.value);" />
    </body>
</html>

さて、フォームに2013-02-31と入力するとコンソールに何と表示されるでしょうか?
わかります?

答えは

2013-01-01

です。
要するに、不正な日付を入力するとフォームの値がvalue属性の値になってしまいます。


ぶっちゃけ、困るんですけどコレ…。

ワークアラウンド

とりあえずこんな感じにしときました。

$(document).ready(function() {
    $("input[type='date'], input[type='datetime'], input[type='datetime-local']").each(function() {
        var $this = $(this);
        $this.val($this.val() || $this.attr('value')).attr('value', null);
    });
});

これで、不正な日付が入力されるとフォームの値は空文字になります。


残念ながら、2013-02-31のような『不正ではあるが、とにかく入力された値』を取ることは出来ないようです。