本ブログは移転しました。新しいブログは こちら です。

input type="date"で手っ取り早くそれなりの日付入力フォームを作る

Htmlの日付の入力フォームを作るとき、てっとり速くそれなりのものを作るメモ。 input type="date"を使うので、Chrome、Firefoxとかだと動きますがIEとかだと動かないと思います。

<html>
<head>
    <style>
        input[type="date"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    </style>
</head>
<body>
<input id="date-form" type="date" min="2019-04-01" max="2030-03-31">
<script>
    (function() {
        var dateForm = document.querySelector('#date-form');
        var today = new Date();
        var month = ('0'   (today.getMonth()   1)).slice(-2);
        var day = ('0'   today.getDate()).slice(-2);
        dateForm.value = `${today.getFullYear()}-${month}-${day}`

        var isAllowedKeyCode = function(actualKeyCode) {
            var tabCode = 9;
            return actualKeyCode === tabCode;
        }

        dateForm.addEventListener('keydown', function(event) {
            if (!isAllowedKeyCode(event.keyCode)) {
                event.preventDefault();
            }
        });
    }())
</script>
</body>
</html>

もちろんそれなりに使えるのですが、デフォルトのままキーボードの数字キー・上下キーでの入力を許してしまうと2月31日などカレンダー上存在しない日付を入力出来てしまうのでキーボードイベントは抑制しています。

また、Chromeなどで表示するとキーボードの上下キーと同じような感じで年月日を変更できるボタンがでてきてしまいます。こちらも抑制したいので、cssを使って非表示にしています。

参考

Contents