こんにちは、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属性は要素を取得しやすいように指定しているだけですので、querySelectorformsで取得する場合は必要ありませんので省略してもらって大丈夫です。

セレクトボックスの作成は以上で完了です。続いて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()
    }
});

最後に

今回はセレクトボックスを例に当日を含む過去の日付を削除する処理を作成しました。

日付の比較はできればサーバーサイドでやるべきだとは思いますが、本記事でご紹介した内容や、ざっくりとしたイベント開始前・終了後の表示の切り替え等であれば問題ないかと思いますので、色々な場面で使用していただければと思います!

以上、JavaScriptで日付一覧から当日を含む過去の日付を削除する方法のご紹介でした!

JavaScriptを体系的に学びたい方

下記の参考書がおすすめです。私も勉強を始めた際に購入しました。入門書として必要な基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。