バイブコーダーのための名称辞典

日付ピッカーとは

日付を入力させる部品。ブラウザ標準の input type="date" を使うと、OS 標準のカレンダー UI がそのまま使える。

概要

日付を選んで入力してもらうための部品です。<input type="date"> を使うと、ブラウザや OS が用意しているカレンダー UI がそのまま使え、min・max 属性で選べる日付の範囲を制限できます。カレンダーの見た目を自作しようとすると、月送り・曜日の並び・キーボード操作・スマホ対応まで自前で作り込む必要があり、コストの割にネイティブの input type="date" を超える体験を作るのは簡単ではありません。凝った見た目がどうしても必要な場合は、実績のある日付ピッカーのライブラリを使うことを勧めます。

別名

表記ゆれ：デートピッカー、カレンダー入力、date picker

「カレンダー入力」は日付ピッカーの機能面を指した呼び方で、指すものは同じです。

AI への伝え方

「予約日を選ぶ日付ピッカーを、input type=“date” で作って。今日から 1 年以内しか選べないようにして」のように、ネイティブの日付入力でよいことと、選べる範囲（min・max）を伝えます。カレンダー UI を自作してほしい場合は、コストが高いことを踏まえたうえでその旨を明示します。

似たパーツとの違い

「セレクトボックス」はあらかじめ決まった選択肢から 1 つを選ぶ部品ですが、日付ピッカーはカレンダーという専用の見た目で年月日を組み立てて選ばせる点が異なります。

デモ

本日から 1 年以内の日付を選べます

コード

HTML 
<div class="date-picker-demo">
  <label class="date-picker-demo__label" for="date-picker-demo-input">予約日</label>
  <input
    class="date-picker-demo__input"
    type="date"
    id="date-picker-demo-input"
    name="reservation-date"
    min="2026-09-26"
    max="2027-09-26"
  />
  <p class="date-picker-demo__hint">本日から 1 年以内の日付を選べます</p>
</div>
CSS 
.date-picker-demo {
  font-family: sans-serif;
  max-width: 280px;
}

.date-picker-demo__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.date-picker-demo__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}

.date-picker-demo__input:hover {
  border-color: #666;
}

.date-picker-demo__input:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}

.date-picker-demo__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #666;
}