もう迷わない！input type="date" の日付フォーマット変更完全ガイド

2024-04-02

HTML、CSS、日付型入力に関する「input type="date" のフォーマットを変更するには？」

HTMLの<input>要素で type="date" を指定すると、日付入力用のフィールドが表示されます。しかし、デフォルトのフォーマットはブラウザによって異なり、使いにくい場合もあります。そこで、CSSを使って日付フォーマットを自由にカスタマイズする方法を紹介します。

方法

日付フォーマットを変更するには、以下の2つの方法があります。

::-webkit-datetime-edit-text 疑似要素を使う

この方法は、ChromeやSafariなどのWebKitベースのブラウザで有効です。

input[type="date"]::-webkit-datetime-edit-text {
  /* フォーマット設定 */
  padding: 10px;
  text-align: center;
}

例：

<input type="date">

input[type="date"]::-webkit-datetime-edit-text {
  padding: 10px;
  text-align: center;
}

出力：

::before 疑似要素とJavaScriptを使う

この方法は、すべてのブラウザで有効ですが、JavaScriptが必要になります。

<input type="date" id="date">

#date::before {
  content: attr(value);
  /* フォーマット設定 */
  padding: 10px;
  text-align: center;
}

const dateInput = document.getElementById('date');

dateInput.addEventListener('change', () => {
  const date = new Date(dateInput.value);
  const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  dateInput.setAttribute('value', formattedDate);
});

<input type="date" id="date">

#date::before {
  content: attr(value);
  padding: 10px;
  text-align: center;
}

const dateInput = document.getElementById('date');

dateInput.addEventListener('change', () => {
  const date = new Date(dateInput.value);
  const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  dateInput.setAttribute('value', formattedDate);
});

補足

上記の例は基本的なものです。必要に応じて、フォーマットをさらにカスタマイズすることができます。
JavaScriptを使う方法では、Dateオブジェクトを使って日付を自由に操作することができます。

input type="date" 以外にも、input type="datetime-local" や input type="month" など、さまざまな日付入力用のタイプがあります。
ブラウザによっては、日付フォーマットをカスタマイズするための独自のプロパティやメソッドを提供している場合があります。

注意事項

CSSによるカスタマイズは、ブラウザによって互換性が異なる場合があります。
JavaScriptを使う場合は、セキュリティ対策を講じる必要があります。

::-webkit-datetime-edit-text 疑似要素を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日付フォーマット変更サンプル</title>
  <style>
    input[type="date"]::-webkit-datetime-edit-text {
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <input type="date">
</body>
</html>

::before 疑似要素とJavaScriptを使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日付フォーマット変更サンプル</title>
  <style>
    #date::before {
      content: attr(value);
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <input type="date" id="date">
  <script>
    const dateInput = document.getElementById('date');

    dateInput.addEventListener('change', () => {
      const date = new Date(dateInput.value);
      const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
      dateInput.setAttribute('value', formattedDate);
    });
  </script>
</body>
</html>

実行方法

上記のコードをHTMLファイルに保存します。
ブラウザでファイルをを開きます。
日付入力フィールドに値を入力すると、フォーマットが変更されます。

注意事項

上記のコードはサンプルです。必要に応じて変更してください。
::-webkit-datetime-edit-text 疑似要素は、ChromeやSafariなどのWebKitベースのブラウザでのみ有効です。

日付フォーマットを変更する他の方法

placeholder 属性を使って、入力フィールドにプレースホルダーテキストを設定することができます。プレースホルダーテキストには、希望する日付フォーマットを指定することができます。

<input type="date" placeholder="YYYY年MM月DD日">

JavaScriptライブラリを使う

DateFns などのJavaScriptライブラリを使って、日付を自由にフォーマットすることができます。

<input type="date" id="date">

const dateInput = document.getElementById('date');

dateInput.addEventListener('change', () => {
  const date = new Date(dateInput.value);
  const formattedDate = dateFns.format(date, 'YYYY年MM月DD日');
  dateInput.setAttribute('value', formattedDate);
});

サーバーサイドで処理する場合は、PHPなどの言語を使って日付をフォーマットすることができます。

<?php

$date = $_POST['date'];

// 日付フォーマットの変換
$formattedDate = date('Y年m月d日', strtotime($date));

?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日付フォーマット変更サンプル</title>
</head>
<body>
  <input type="date" name="date">
  <input type="submit" value="送信">

  <?php if (isset($formattedDate)): ?>
    <p>フォーマット済みの日付：<?php echo $formattedDate; ?></p>
  <?php endif; ?>
</body>
</html>