日付・生年月日を表記する際、4桁目と5桁目の間と6桁目と7桁目の間にスラッシュ（/）が入る「2024/11/11」という形式をよく見かけますね。
そして、お問い合わせフォームで日付・生年月日を入力してもらう際、4桁目と5桁目の間と6桁目と7桁目の間で自動でスラッシュ（/）が入力されると親切だなと思ったことありませんか？
この機能はjQueryを使うと簡単に実現することが出来ます。
この記事では、日付・生年月日の入力の際に桁目と5桁目の間と6桁目と7桁目の間で自動でスラッシュ（/）が入力する方法をご紹介したいと思います。

完成コード

まずは完成コードを見てみましょう。

HTMLはこちら。name属性はdateとします。

<input type="text" name="date" placeholder="2024/11/11">

jQueryのコードはこちら。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function() {
    $('input[name="date"]').on('input', function() {
        // 半角数値以外の入力を削除
        var date_val = $(this).val().replace(/\D/g, '');

        // 8桁を超えた場合その入力値を削除
        if (date_val.length > 8) {
            date_val = date_val.substring(0, 8);
        }

        // 4桁目と5桁目の間にスラッシュ（/）を入れる
        if (date_val.length > 4) {
            date_val = date_val.substring(0, 4) + '/' + date_val.substring(4);
        }

        // 7桁目と8桁目の間にスラッシュ（/）を入れる
        if (date_val.length > 7) {
            date_val = date_val.substring(0, 7) + '/' + date_val.substring(7);
        }

        // 入力した値をフィールドにセット
        $(this).val(date_val);
    });
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

ここからはコードの解説です。このコードは以下のように動作します。

$('input[name="date"]').on('input', function() { ... });

name属性がdateのinputタグに入力、削除などがあった時に実行されます。

// 半角数値以外の入力を削除
var date_val = $(this).val().replace(/\D/g, '');

半角数値以外の文字が入力された際は自動でその文字を削除されます。
つまり、この入力フィールドは半角数値の入力のみが有効となります。
この段階では、スラッシュ（/）も削除されます。

// 8桁を超えた場合その入力値を削除
if (date_val.length > 8) {
    date_val = date_val.substring(0, 8);
}

今回作成するフォーマットは「2024/11/11」、スラッシュを除いた数値だけで8桁なのでそれ以上の入力は不要です。
8桁以上の入力があった場合はその文字を削除します。
つまり、8桁以上は入力出来ないようになっています。

// 4桁目と5桁目の間にスラッシュ（/）を入れる
if (date_val.length > 4) {
    date_val = date_val.substring(0, 4) + '/' + date_val.substring(4);
}

// 7桁目と8桁目の間にスラッシュ（/）を入れる
if (date_val.length > 7) {
    date_val = date_val.substring(0, 7) + '/' + date_val.substring(7);
}

数値が4桁を超える場合、最初の4桁の後にスラッシュ（/）を自動入力し、その後の更に2桁の後にもスラッシュ（/）を自動入力し、最後の2桁を続けます。
これにより、日付・生年月日のフォーマット（2024/11/11）が作成されます。

6桁の日付・生年月日フォーマット

日付・生年月日のフォーマットで「24/11/11」の場合のコードはこちら。

$(document).ready(function() {
    $('input[name="date"]').on('input', function() {
        // 半角数値以外の入力を削除
        var date_val = $(this).val().replace(/\D/g, '');

        // 6桁を超えた場合その入力値を削除
        if (date_val.length > 6) {
            date_val = date_val.substring(0, 6);
        }

        // 2桁目と3桁目の間にスラッシュ（/）を入れる
        if (date_val.length > 2) {
            date_val = date_val.substring(0, 2) + '/' + date_val.substring(2);
        }

        // 5桁目と6桁目の間にスラッシュ（/）を入れる
        if (date_val.length > 5) {
            date_val = date_val.substring(0, 5) + '/' + date_val.substring(5);
        }

        // 入力した値をフィールドにセット
        $(this).val(date_val);
    });
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしょうか？
このコードを使うことで、ユーザーが日付・生年月日を入力する際に自動的に日付・生年月日のフォーマットに整えられ、ユーザーが「20241111」と入力すると「2024/11/11」と表示されるようになります。
これにより、ユーザーの入力ミスを減らし、日付・生年月日の一貫したフォーマットを確保することが出来ます。