javascript 現在日付からX日後の日付を表示する
- 2020.08.11
- javascript
- javascript

javascriptで、現在日付からX日後を表示するサンプルコードを記述してます。DateオブジェクトのsetDateメソッドを使用します。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
※windows10にApacheのインストールはこちら
setDateメソッド使い方
setDateメソッドで、日付を加算する場合は、以下となります。
1 2 |
var date = new Date(); date.setDate(date.getDate() + 7); |
使用例
1 2 3 4 |
var date = new Date(); date.setDate(date.getDate() + 7); console.log(date.getDate()); // 結果 現在日付 + 7日 |
サンプルコード
以下は、テキストフォームに入力された値を現在日時に加算するサンプルコードとなります。
※cssには「uikit」を使用してます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>mebeeサンプル</title> <!-- UIkit CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css" /> <!-- UIkit JS --> <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js"></script> </head> <style> .main { margin: 0 auto; margin-top: 80px; display: flex; flex-direction: column; align-items: center; font-size: 20px; } </style> <script> var date = new Date(); window.onload = function () { document.getElementById("hoge").textContent = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"; }; function days(day) { //日付をセット date.setDate(date.getDate() + day); document.getElementById("foo").textContent = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日"; }; </script> <body> <div class="main"> <div class="uk-dark uk-background-muted uk-padding"> <dl class="uk-description-list uk-description-list-divider"> <dt>現在日付</dt> <dd id="hoge"></dd> <dt>日付を追加</dt> <dd id="foo"></dd> </dl> <form> <fieldset class="uk-fieldset"> <div class="uk-margin"> <input id="text-box" class="uk-input" type="text" placeholder="日付を入力"> </div> </fieldset> </form> <p uk-margin> <button class="uk-button uk-button-danger" onclick="(function(){var val = document.getElementById('text-box').value;days(parseInt(val));})();">日付加算</button> </p> </div> </div> </body> </html> |
日付が加算されたことが確認できます。

-
前の記事
javascript テキストフォームに値を代入する 2020.08.11
-
次の記事
php ライブラリ「Monolog」を使ってログを出力する 2020.08.11
コメントを書く