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

本記事では、JavaScriptでセレクトボックスのセレクトボックスにn日後までの日付を動的に表示する方法をご紹介しています。動的に、というのは現在から～日後までの日付を表示するという意味合いになります。曜日によって表示・非表示の設定をしたいケースもあると思いますので、そちらにも対応しています。

JavaScriptで現在から何日後かを指定して動的にセレクトボックスに日付を表示したいんだけど、良い方法ないかな？

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

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

一部2021年6月5日(土)に実行した結果が表示されていますので、予めご了承ください。

現在から1日後の日付を取得してみる

まずは日付処理入門ということで現在から1日後の日付を取得してみます。

日付の取得にはDateを使用します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

JavaScript

//現在＋1日のミリ秒値を指定
let param = Date.now() + 86400000;
//paramの値で日付を取得
let date = new Date(param)

let y = date.getFullYear(); //年
let m = date.getMonth() + 1; //月
let d = date.getDate(); //日
let w = date.getDay(); //曜日値

console.log(y, m, d, w)

実行結果

2021 6 6 0

※86400000は1日の秒数60*60*24をミリ秒60*60*24*1000に置き換えたものです。

現在から7日後の日付を取得してみる

上記の処理に追加する形で7日後の日付を取得してみます。先ほどの1日のミリ秒に7を乗算して日付を取得します。

JavaScript

//現在＋7日のミリ秒値を指定
let param = Date.now() + (7 * 86400000);
//値から日付を取得
let date = new Date(param)

let y = date.getFullYear(); //年
let m = date.getMonth() + 1; //月
let d = date.getDate(); //日
let w = date.getDay(); //曜日値

console.log(y, m, d, w)

実行結果

2021 6 12 6

7日後の日付を取得することができています。

現在から30日後の日付を取得してみる

30日後の場合も同様です。先ほど7を乗算した箇所の数値を変更することで取得することができます。

JavaScript

//現在＋30日のミリ秒値を指定
let param = Date.now() + (30 * 86400000);
//値から日付を取得
let date = new Date(param)

let y = date.getFullYear(); //年
let m = date.getMonth() + 1; //月
let d = date.getDate(); //日
let w = date.getDay(); //曜日

console.log(y, m, d, w)

実行結果

2021 7 5 1

これで(n)日後までの日付をある程度自由に取得することができるようになりました。

次は上記の日付の取得方法を基にして(n)日後までの日付をセレクトボックスに表示してみましょう。

(n)日後までの日付をセレクトボックスに表示する

前項でご紹介しましたので、まずは7日後までの日付をセレクトボックスに表示してみます。スクリプトの処理内容につきましてはコメントを記載しておりますので、参考にしていただければと思います。

HTML

<select id="datelist" name="datelist">
    <option value="">---選択してください---</option>
</select>

JavaScript

//要素取得
const datelist = document.getElementById('datelist')
//表示終了日
const end = 7
//日本の曜日
const week = ['日', '月', '火', '水', '木', '金', '土']

if(end !== undefined){

    for(let i = 0; i < end; i++){
        //取得する日付の値を設定
        let param = Date.now() + i * 86400000
        //値から日付を取得
        let date = new Date(param)
        
        //dateから年を取得
        let y = date.getFullYear()
        //dateから月を取得
        let m = date.getMonth()+1
        //dateから日を取得
        let d = date.getDate()
        //dateから曜日を取得
        let w = date.getDay()
        
        //月を2桁に揃える
        if(m < 10){ m = '0'+m }
        //日を2桁に揃える
        if(d < 10){ d = '0'+d }
        
        //テキストの出力形式
        let textFormat = y+'年'+m+'月'+d+'日'+'('+week[w]+')'
        //値の出力形式
        let valueFormat = y+'-'+m+'-'+d
        
        //option要素を作成
        let option = document.createElement('option')
        //optionのテキストを指定
        option.textContent = textFormat
        //optionの値を指定
        option.value = valueFormat
        //detelistの末尾に追加
        datelist.appendChild(option);
    }
}

実行結果

See the Pen Now to After Date1 | JavaScript by ryohei (@intotheprogram) on CodePen.

(n)日後～(n)日後までの日付をセレクトボックスに表示する

前項でご紹介した内容を少し改良して、(n)日後～(n)日後までを指定して日付をセレクトボックスに表示してみたいと思います。HTMLのdata属性を使用して、表示開始日～表示終了日の値を指定します。

下記の例では、5日後～10日後までの日付を指定しています。

HTML

<select id="datelist" name="datelist" data-start="5" data-end="10">
    <option value="">---選択してください---</option>
</select>

JavaScript

//要素取得
const datelist = document.getElementById('datelist')
//data-startを取得（表示開始日数）
const start = datelist.dataset.start
//data-endを取得（表示終了日数）
const end = datelist.dataset.end
//日本の曜日
const week = ['日', '月', '火', '水', '木', '金', '土']

if(start !== undefined && end !== undefined ){

    for(let i = Number(start); i < end; i++){
        //取得する日付の値を設定
        let param = Date.now() + i * 86400000
        //値から日付を取得
        let date = new Date(param)
        
        //dateから年を取得
        let y = date.getFullYear()
        //dateから月を取得
        let m = date.getMonth()+1
        //dateから日を取得
        let d = date.getDate()
        //dateから曜日を取得
        let w = date.getDay()
        
        //月を2桁に揃える
        if(m < 10){ m = '0'+m }
        //日を2桁に揃える
        if(d < 10){ d = '0'+d }
        
        //テキストの出力形式
        let textFormat = y+'年'+m+'月'+d+'日'+'('+week[w]+')'
        //値の出力形式
        let valueFormat = y+'-'+m+'-'+d
        
        //option要素を作成
        let option = document.createElement('option')
        //optionのテキストを指定
        option.textContent = textFormat
        //optionの値を指定
        option.value = valueFormat
        //detelistの末尾に追加
        datelist.appendChild(option);
    }
}

実行結果

See the Pen Now to After Date2 | JavaScript by ryohei (@intotheprogram) on CodePen.

曜日の表示・非表示を指定してセレクトボックスに表示する

さらに応用編ということで、曜日の表示・非表示を指定してセレクトボックスに表示してみます。

前項の内容にdata-disableというdata属性を追加しました。カンマ区切りの値は各曜日（日曜日～月曜日）に対応しており、0が表示、1が非表示の指定となります。

下記の例では水曜日を非表示にしていますので、参考にしていただければと思います。

HTML

<select id="datelist" name="datelist" data-start="5" data-end="20" data-disable="0,0,0,1,0,0,0">
    <option value="">---選択してください---</option>
</select>

JavaScript

//要素取得
const datelist = document.getElementById('datelist')
//data-startを取得（表示開始日数）
const start = datelist.dataset.start
//data-endを取得（表示終了日数）
const end = datelist.dataset.end
//data-weekを取得してカンマで配列にする
const disable = datelist.dataset.disable.split(',')
//日本の曜日配列
const week = ['日', '月', '火', '水', '木', '金', '土']

if(start !== undefined && end !== undefined ){

    for(let i = Number(start); i < end; i++){
        //取得する日付の値を設定
        let param = Date.now() + i * 86400000
        //値から日付を取得
        let date = new Date(param)
        
        //dateから年を取得
        let y = date.getFullYear()
        //dateから月を取得
        let m = date.getMonth()+1
        //dateから日を取得
        let d = date.getDate()
        //dateから曜日を取得
        let w = date.getDay()
        
        //月を2桁に揃える
        if(m < 10){ m = '0'+m }
        //日を2桁に揃える
        if(d < 10){ d = '0'+d }
        
        //テキストの出力形式
        let textFormat = y+'年'+m+'月'+d+'日'+'('+week[w]+')'
        //値の出力形式
        let valueFormat = y+'-'+m+'-'+d
        
        //表示する曜日を判定
        if(disable[w] === '0'){
        
            //option要素を作成
            let option = document.createElement('option')
            //optionのテキストを指定
            option.textContent = textFormat
            //optionの値を指定
            option.value = valueFormat
            //detelistの末尾に追加
            datelist.appendChild(option);
        }
    }
}

実行結果

See the Pen Now to After Date3 | JavaScript by ryohei (@intotheprogram) on CodePen.

これで曜日による表示・非表示の制御ができるようになりました。

最後に

本記事でご紹介した内容は、ある企業サイトの来場予約のフォームを構築した際に作成したものになります。もう少し手を加えて土日の色を変更したり、月によってoptgroupを設定したり、使いやすいように改良してみてくださいね！

以上、JavaScriptでセレクトボックスにn日後までの日付を動的に表示する方法のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら