予約受付フォームを作る際、input type=”data”でカレンダーが出せるけどブラウザ依存があるため使いづらい。
そのため、ドロップダウンで作る受付フォーム・・・しかも受付日は何日後から何日後まで制限をかける必要がある場合のソースを見つけたので忘備録。
参考は「Into the Program」さんの「【JavaScript】セレクトボックスにn日後までの日付を動的に表示する」より。
設定としては、今日から4日後から30日後までを受け付ける、という設定。
<select id="datelist1" name="第一希望（月日）" data-start="4" data-end="30">
<option value="">---選択してください---</option>
</select>
スクリプト側はこんな感じになる。
<script>
//要素取得
const datelist1 = document.getElementById('datelist1')
//data-startを取得（表示開始日数）
const start1 = datelist1.dataset.start
//data-endを取得（表示終了日数）
const end1 = datelist1.dataset.end
//日本の曜日
const week1 = ['日', '月', '火', '水', '木', '金', '土']
if(start1 !== undefined && end1 !== undefined ){
for(let i = Number(start); i < end; i++){
//取得する日付の値を設定
let param = Date.now() + i * 86400000
//値から日付を取得
let date = new Date(param)
//dateから年を取得
let y1 = date.getFullYear()
//dateから月を取得
let m1 = date.getMonth()+1
//dateから日を取得
let d1 = date.getDate()
//dateから曜日を取得
let w1 = date.getDay()
//月を2桁に揃える
if(m1 < 10){ m1 = '0'+m1 }
//日を2桁に揃える
if(d1 < 10){ d1 = '0'+d1 }
//テキストの出力形式
let textFormat = y1+'年'+m1+'月'+d1+'日'+'('+week[w1]+')'
//値の出力形式
let valueFormat = y1+'-'+m1+'-'+d1
//option要素を作成
let option = document.createElement('option')
//optionのテキストを指定
option.textContent = textFormat
//optionの値を指定
option.value = valueFormat
//detelistの末尾に追加
datelist1.appendChild(option);
}
}
</script>第一希望/第二希望の様に複数設置する場合、そのまま設置するとIDなどが被ってしまって動かないので、id=”datelist1″をid=”datelist2″にして、スクリプト側もdatelist1、start1、end1、week1、y1、m1、d1、w1の「1」を「2」に置き換えたら複数設置が可能になる。