【JavaScript】日付一覧から当日を含む過去の日付を削除する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでセレクトボックス等に表示する日付一覧から当日を含む過去の日付を削除する方法をご紹介しています。

セレクトボックスから当日を含む過去の日付を削除して表示したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

本記事では、セレクトボックス等に表示する日付一覧の中から、当日を含む過去の日付を削除する処理を作成します。

例えば下記のようなセレクトボックスがあったとします。

<select id="datelist" name="datelist">
    <option value="2021-07-19">2021年07月19日(月)</option>
    <option value="2021-07-20">2021年07月20日(火)</option>
    <option value="2021-07-21">2021年07月21日(水)</option>
    <option value="2021-07-22">2021年07月22日(木)</option>
    <option value="2021-07-23">2021年07月23日(金)</option>
    <option value="2021-07-24">2021年07月24日(土)</option>
    <option value="2021-07-25">2021年07月25日(日)</option>
</select>

2021年7月21日(水)にページにアクセスがあったとして、上記のセレクトボックスに表示している日付リストから当日を含む、2021年7月21日までの過去の日付を削除します。

削除後に表示される日付一覧は下記のようになります。

<select id="datelist" name="datelist">
    <option value="2021-07-22">2021年07月22日(木)</option>
    <option value="2021-07-23">2021年07月23日(金)</option>
    <option value="2021-07-24">2021年07月24日(土)</option>
    <option value="2021-07-25">2021年07月25日(日)</option>
</select>

上記のように日付を判定して、当日を含む過去の日付を削除する処理をご紹介しています。

datePicker等を使用すればカレンダーから過去の日付を選択できない状態にすることもできますが、そんなに日数がない、期間が短いイベントの予約等で使用される場合に参考にしていただければ幸いです。

では実際に作っていきましょう。

セレクトボックスを作成する

今回はセレクトボックスを例に作成していきます。前項と同様に日付一覧を設定したHTMLを作成します。動作確認のため、投稿日直近の日付を一覧に表示しています。

<select id="datelist" name="datelist">
    <option value="2021-07-19">2021年07月19日(月)</option>
    <option value="2021-07-20">2021年07月20日(火)</option>
    <option value="2021-07-21">2021年07月21日(水)</option>
    <option value="2021-07-22">2021年07月22日(木)</option>
    <option value="2021-07-23">2021年07月23日(金)</option>
    <option value="2021-07-24">2021年07月24日(土)</option>
    <option value="2021-07-25">2021年07月25日(日)</option>
</select>

id属性は要素を取得しやすいように指定しているだけですので、querySelectorやformsで取得する場合は必要ありませんので省略してもらって大丈夫です。

セレクトボックスの作成は以上で完了です。続いてJavaScriptで動的な部分の処理を作成していきます。

当日を含む過去の日付を削除する処理

完成したスクリプトを下記に掲載します。各行にコメントを記載していますので、処理内容につきましてはコメントをご参照ください。

//引数の日付からJSTのミリ秒を取得
const getTimeJST = function(date){
    return new Date(
        date.toLocaleString({
            timeZone: 'Asia/Tokyo' 
        })
    ).getTime()
}

//select要素を取得
const datelist = document.getElementById('datelist')
//select要素のoptionを取得
const options = datelist.options
//処理実行時のJST(ミリ秒)を取得
const today = getTimeJST(new Date)

//select要素のoptionの繰り返し処理
Array.from(options).forEach(function(option) {
    //valueを区切り文字で配列に変換
    let valueArray = option.value.split('-')
    //年
    let year  = valueArray[0]
    //月
    let month = valueArray[1]-1
    //日
    let day   = valueArray[2]
    //valueの日付からJSTのミリ秒を取得
    let optionDate  = getTimeJST(new Date(year, month, day))
    
    //valueとtodayの比較
    if(optionDate < today){
        //当日を含む処理実行時までの日付(option)を削除
        option.remove()
    }
});