フォーム入力
日付ピッカー
入力欄をタップするとカレンダーが開き、日を選ぶと入力される。月の前後移動にも対応。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="dp-wrap">
<label class="dp-label" for="dp-input">日付</label>
<div class="dp-field-wrap">
<input
id="dp-input"
class="dp-input"
type="text"
placeholder="YYYY/MM/DD"
readonly
/>
<span class="dp-icon" aria-hidden="true">📅</span>
</div>
<div class="dp-cal" id="dp-cal" hidden>
<div class="dp-cal-head">
<button class="dp-nav" id="dp-prev" type="button" aria-label="前月">‹</button>
<span class="dp-month" id="dp-month"></span>
<button class="dp-nav" id="dp-next" type="button" aria-label="翌月">›</button>
</div>
<div class="dp-grid-head">
<span>日</span><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span>土</span>
</div>
<div class="dp-grid" id="dp-grid"></div>
</div>
</div>