【jQuery】日付入力フィールドにスラッシュを自動挿入する方法

日付を入力する際に、スラッシュ（/）を手動で入力するのは手間がかかりますよね。特に生年月日などのフィールドでは、ユーザーが統一されたフォーマットで入力するのを助けるために、スラッシュを自動で挿入する機能を実装することができます。今回は、jQueryを使ってこの機能を簡単に実装する方法をご紹介します。

必要なファイルを準備する

まずは、HTMLファイルを用意し、jQueryライブラリを読み込みます。以下のようにして、HTMLファイルの<head>セクションにjQueryのスクリプトタグを追加しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日付入力でスラッシュ自動入力</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- コンテンツはここに -->
</body>
</html>

日付入力フィールドを作成する

次に、日付入力フィールドをHTML内に作成します。このフィールドにスラッシュ自動挿入の機能を追加します。

<body>
    <label for="date-input">生年月日（YYYY/MM/DD）:</label>
    <input type="text" id="date-input" placeholder="YYYY/MM/DD" maxlength="10">
</body>

jQueryスクリプトを追加する

次に、jQueryを使ってスラッシュを自動的に挿入するスクリプトを追加します。以下のコードを<head>セクションの<script>タグ内に追加します。

<script>
    $(document).ready(function() {
        $('#date-input').on('input', function() {
            var input = $(this).val();
            var formattedInput = input.replace(/\D/g, '');
            
            if (formattedInput.length >= 4) {
                formattedInput = formattedInput.substring(0, 4) + '/' + formattedInput.substring(4);
            }
            if (formattedInput.length >= 7) {
                formattedInput = formattedInput.substring(0, 7) + '/' + formattedInput.substring(7, 9);
            }

            $(this).val(formattedInput);
        });
    });
</script>

スクリプトの動作を確認する

全てのコードが揃ったら、ブラウザでHTMLファイルを開いて動作を確認しましょう。日付入力フィールドに数字を入力するだけで、自動的にスラッシュが挿入されるはずです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日付入力でスラッシュ自動入力</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#date-input').on('input', function() {
                var input = $(this).val();
                var formattedInput = input.replace(/\D/g, '');
                
                if (formattedInput.length >= 4) {
                    formattedInput = formattedInput.substring(0, 4) + '/' + formattedInput.substring(4);
                }
                if (formattedInput.length >= 7) {
                    formattedInput = formattedInput.substring(0, 7) + '/' + formattedInput.substring(7, 9);
                }

                $(this).val(formattedInput);
            });
        });
    </script>
</head>
<body>
    <label for="date-input">生年月日（YYYY/MM/DD）:</label>
    <input type="text" id="date-input" placeholder="YYYY/MM/DD" maxlength="10">
</body>
</html>

サンプル


まとめ

今回は、jQueryを使って日付入力フィールドにスラッシュを自動的に挿入する方法をご紹介しました。ユーザーが日付を入力する際に、自動でスラッシュが挿入されることで、入力の手間が省け、データの整合性も保たれます。ぜひ、あなたのプロジェクトにも取り入れてみてください。