【jQuery】日付入力フィールドにスラッシュを自動挿入する完全ガイド｜YYYY/MM/DD・バックスペース対応・input[type=date]比較まで

生年月日や予約日などの日付入力フォームで「1990/01/15」のようにスラッシュを自動挿入すると、ユーザーが手動で区切り文字を入力する手間を省けます。この記事ではYYYY/MM/DD形式のスラッシュ自動挿入・バックスペース対応・バリデーションまで解説します。

input[type=date]との使い分け

まず「スラッシュ自動挿入が本当に必要か」を確認してください。ブラウザ標準の <input type="date"> は日付ピッカーUI付きで、実装が最も簡単です。

デザイン要件がなければ input[type=date] の利用を推奨します。

YYYY/MM/DD形式のスラッシュ自動挿入

<input type="text" id="date-input" placeholder="例: 1990/01/15"
       maxlength="10" inputmode="numeric">

$(function () {
  $('#date-input').on('input', function () {
    var val = $(this).val();

    // 数字以外を除去
    var digits = val.replace(/[^0-9]/g, '');

    // スラッシュを自動挿入
    var formatted = digits
      .slice(0, 8)                          // 最大8桁
      .replace(/^(\d{4})(\d)/, '$1/$2')   // 4桁後にスラッシュ
      .replace(/^(\d{4}\/\d{2})(\d)/, '$1/$2'); // 7文字後にスラッシュ

    $(this).val(formatted);
  });
});

バックスペース対応（削除時にスラッシュも自動削除）

Backspaceでスラッシュのすぐ後ろの数字を削除した場合、スラッシュも一緒に削除する処理です。

$(function () {
  var prevVal = '';

  $('#date-input').on('keydown', function (e) {
    prevVal = $(this).val();
  });

  $('#date-input').on('input', function () {
    var val    = $(this).val();
    var digits = val.replace(/[^0-9]/g, '');

    // バックスペースで前の文字が/だった場合、/も削除
    var isDeleting = val.length < prevVal.length;
    if (isDeleting && prevVal.charAt(prevVal.length - 1) === '/') {
      digits = digits.slice(0, -1); // 最後の数字も削除
    }

    var formatted = digits
      .slice(0, 8)
      .replace(/^(\d{4})(\d)/, '$1/$2')
      .replace(/^(\d{4}\/\d{2})(\d)/, '$1/$2');

    $(this).val(formatted);
    prevVal = formatted;
  });
});

日付バリデーション

YYYY/MM/DD形式の入力値が実在する日付かどうかを確認します。

function isValidDate(str) {
  // YYYY/MM/DD 形式チェック
  if (!/^\d{4}\/\d{2}\/\d{2}$/.test(str)) return false;

  var parts = str.split('/');
  var y = parseInt(parts[0], 10);
  var m = parseInt(parts[1], 10);
  var d = parseInt(parts[2], 10);

  // Dateオブジェクトで実在するかチェック（月は0始まり）
  var date = new Date(y, m - 1, d);
  return date.getFullYear() === y &&
         date.getMonth()    === m - 1 &&
         date.getDate()     === d;
}

$(function () {
  $('form').on('submit', function (e) {
    var val = $('#date-input').val();
    if (!isValidDate(val)) {
      e.preventDefault();
      $('#date-error').text('正しい日付を入力してください（例: 1990/01/15）');
    }
  });

  // 入力完了（10文字）でリアルタイムバリデーション
  $('#date-input').on('input', function () {
    var val = $(this).val();
    if (val.length === 10) {
      var valid = isValidDate(val);
      $('#date-error').text(valid ? '' : '存在しない日付です');
    } else {
      $('#date-error').text('');
    }
  });
});

まとめ

日付入力フィールドへのスラッシュ自動挿入の実装ポイントをまとめます。

• 数字以外を除去 → 正規表現で4桁・7桁後にスラッシュ挿入
• バックスペース対応: 削除時に前の文字がスラッシュなら数字も1つ削除
• バリデーション: Date オブジェクトで実在する日付か確認
• 新規プロジェクトなら input[type=date] を先に検討する

関連記事: 郵便番号にハイフンを自動挿入する方法 / 時間入力にコロンを自動挿入する方法 / フォームバリデーション完全ガイド

よくある質問（FAQ）