ホームページ上で日付を2週間後に自動更新したい

Question

前提・実現したいこと

ホームページ上で日付更新を自動化したいです。
javascriptは初心者です。

やりたいことは、

ホームページ上に

更新日：2018/3/1
次回更新予定日：2018/3/15

のように次回更新日は2週間後を表示、
2週間経過するまではどちらもそのままの日付を表示。

2週間後
更新日:2018/3/15
次回更新予定日：2018/3/29

となっているのが理想です。（これを常に繰り返す）

色々とここの過去ログもみたりして、moment.jsを使用したりしている
例をみましたがやりたいこととは違いました。

どなたかご教授願いませんでしょうか？

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

moment.jsを使用して

過去の質問にあった下記スクリプトも試しましたが
思った動きにはなりませんでした。

<script> var nMoment = moment(); var gMoment = moment( '2018-3-14' ).add( 14, 'days' ); function timecheck(){ if ( nMoment >= gMoment ){ document.getElementById ( 'timer' ).innerHTML = gMoment.add( 14, 'days' ).format( 'YYYY年M月D日' ); } } setInterval("timecheck()",1000); </script>

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

「更新日」の起点はどのように決まっているのでしょうか。

[masamasak]

違っていたら申し訳ないですが、今まで手動更新でしたので起点は特に無くて、最初のスタートはサイトを公開した日になります。

[m.ts10806]

なるほど。了解です。返答いただいた内容で問題ありません。setInterval()の利用は必要性がないように思います。日付をまたいで同じページを見ていることがあるならまだしも、基本、アクセスしなおしたら再計算されますし。setInterval()をコードに入れたのはどのような経緯でしょうか？また、「思った動き」と”違った部分”はどのようなところなのでしょうか？

[masamasak]

基本コードをコピペして、いらないかと思い消してみたら表示されなくなったのでそのまま使用しておりました。また設定の日付（2018-3-14）のところで本日の日付や未来の日付を設定しても表示されなかったのがなぜだろうとずっと彷徨っておりました。

[m.ts10806]

setInterval()は一定時間で繰り返す処理です。繰り返す内容にtimecheck()が含まれていて、そのtimecheck()の中に日付を挿入する記述があるため、ですね。ちょっと今サンプルコードを作ってみています。おおよそできそうなので、もう少々お待ちください。

[masamasak]

申し訳ございませんが、よろしくお願いいたします。

Answer 1

moment.jsを利用しました。
ページアクセス時に起点日（質問者さんより”サイトを公開した日”）と現在日付との差を計算して、
周期から更新日、更新予定日を算出するようにしています。

「起点日」のところを自身が入れたい”サイトを公開した日”を入れることで自動で計算してくれるようになってくれている（はず）です。

<p id="update_date"></p>
<p id="update_plan_date"></p>

window.onload = date_set; //ページアクセス時に計算を実行する

var start_date = moment('2018-01-19'); //起点日
var now = moment(); //現在日付

function date_set(){
    
    //起点日からの経過日付
    diff_days = now.diff(start_date, 'days') ;

    //起点日からの周期を計算
    step_count = Math.floor(diff_days / 14);
    
    //更新日付を計算
    update_date = start_date.add((step_count*14),"days");
    
    //更新日を表示
    document.getElementById ( 'update_date' ).innerHTML = update_date.format("YYYY年M月D日");
    //更新日付から14日後を計算して表示
    document.getElementById ( 'update_plan_date' ).innerHTML = update_date.add(14,"days").format("YYYY年M月D日");
}

ご確認ください。

---

追記

起点日をソースコード直に持つのはあまりよくないかもしれません。
例えばjsonファイルなど外部に持っておいたほうが良いかもしれません。
それに、このやり方だとjavascriptで表示されているテキストを書き換えているだけで、
実際はページは何も更新されていません。
「そもそも更新日・予定日とは？」ということも含めて検討する必要があるかと思います。

Comments

[m.ts10806]

そういえば起点日を未来日入れた場合はテストしてませんでした＾＾；
まあ、そこは状況にあわせて調整してみてください。

[masamasak]

試してみました。ばっちりと理想の形になりました。大変ありがとうございました。
外部ファイル化の方は自分でなんとかやってみたいと思います。
更新日・予定日ですが、今後はワードプレス化を考えておりますのでその時までこのやり方を使用させていただきます。
また初めてこのサイトを使わせていただきましたが、こんなにも返答が早く解決できるとは思っておりませんでした。かなり感動です。また使わせていただきます。
本当にありがとうございました。

[m.ts10806]

WordPressを利用するのであればWordPressが採用しているサーバー側の言語（PHP）や提供している機能でできそうに思います。今回の対応をそのままもっていくのはあまり賢明ではありません。

[masamasak]

ワードプレスに変更したらこのやり方はやめます。その時まで使用させていただきます。
ありがとうざいました。

[m.ts10806]

やり方は色々とあるので、状況やサイトにあったやり方を適宜見つけていくと良いと思います。
がんばってください。

[masamasak]

親切・丁寧に教えていただき誠にありがとうございます。
今後もっと勉強していきたいと思います。

Answer 2

テキストファイルを一つ用意して、そこに基準日から2週間毎の日付を行ごとに列記することです。
2週に1回なら1年でせいぜい26行、数十年分でもさほど負荷になりません。
その上でajaxでデータを取得して、当日に一番近い過去日が最新の更新日
一番近い未来日が次回更新日とすればいいでしょう。
もちろんテキストに書かれるデータは当初は予定でしかないですが
実際のスケジュールにあわせて任意に書き換えれば実態に合わせることは容易です。