のせっち 
こんにちはフリーランスエンジニアののせっち@nosecchi01です。
javascriptで指定日の指定時刻になったら、何か動作を行う処理について解説します。
今回は例としてフォームを閉じる処理をやってみます。
めちゃくちゃ丁寧に解説しますので初心者の方でも安心です。
それでは行ってみましょう！
codepenで確認
まずは実際に挙動を見てみましょう！
コードは下記のようになります。
See the Pen 指定時刻にフォームを閉じる by Yuki Nose (@yukinouz1) on CodePen.
こちらのcodepenはコードを書き換える事が可能です。
下記の部分を今日より未来の日付・時刻に変更してみてください。
const dead = new Date( 2021, (7- 1), 19 , 18 , 1 ); // 締め切り
// 2021年7月19日18時1分に設定しています。
// 今日より未来に変更してください。そうすると、「現在受付を停止しております」の部分が送信ボタンに変わります。
今回解説するjsは、
- 指定日付・指定時刻（1）と現在の日付・時刻（2）を比較する。
- (2) > (1)になったら、送信ボタンを非表示にする。
- 受付停止中のメッセージを出す
という処理をしています。
解説
javascriptの全体像は下記のようになっています。
const dead = new Date( 2021, (7- 1), 19 , 18 , 1 ); // 締め切り
const deadLine = parseInt( dead / 1000 ); // timestampに変更する
const dateCurrent = parseInt( new Date() / 1000 ); // 現在時刻を取得
const sendButton = document.getElementById("sendButton");
const hideButton = document.getElementById("hideButton");
if ( dateCurrent > deadLine ) {
sendButton.style.display = "none";
hideButton.style.display = "block";
}ブロックごとに分解して解説していきます。
const dead = new Date( 2021, (7- 1), 19 , 18 , 1 ); // 締め切り
const deadLine = parseInt( dead / 1000 ); // timestampに変更する締め切りを定義しています。
new Date( Year, Month, day, hour, minutes, seconds, milliseconds)で指定の日付を取得できます。
Monthを(7-1)としているのは、Monthは0始まりだからです。
こちらは型でいうと、Datetimeになります。
「型なんか知らん」と思うかもしれないですが、意外と重要です。
どういう風に出力されるかは実際に console.log()してみればわかります。
// Datetimeを確認するためにconsole.logしてみる
const dead = new Date( 2021, (7- 1), 19 , 18 , 1 );
console.log(dead);
// 結果
// Mon Jul 19 2021 18:01:00 GMT+0900 (日本標準時)最終的には、指定日 vs 現在時刻の比較をしたいわけなので、parseIntを使ってtimestampに型を変更します。
// timestampを確認するためにconsole.logしてみる
const dead = new Date( 2021, (7- 1), 19 , 18 , 1 ); // 締め切り
const deadLine = parseInt( dead / 1000 ); // timestampに変更する
console.log(deadLine);
// 結果
// 1626685260整数にしてあげることで、整数 vs 整数で大小を正確に判定できます。
次に進みます。
const dateCurrent = parseInt( new Date() / 1000 ); // 現在時刻を取得現在時刻を取得 + parseIntでtimestampに変換するところまで一気にやっています。
その後は簡単です。
const sendButton = document.getElementById("sendButton");
const hideButton = document.getElementById("hideButton");
if ( dateCurrent > deadLine ) {
sendButton.style.display = "none";
hideButton.style.display = "block";
}document.getElementById(ID)でhtmlの該当のIDを取得しています。
送信ボタンと、「現在受付を停止しております」に当たる部分ですね！
if( dateCurrent > deadLine)で現在時刻 > 指定時刻だったら、、、という処理をやっています。
簡単ですね。
ポイント（NG例も合わせて）
日付の型を合わせた上で比較することが今回のポイントです。
Timestampに変更せず、Datetimeのまま比較しても多分大丈夫ですが、string型で比較したら絶対合わないのでその点は注意してください。
// NG例
const dead = "2021/07/19 18:01:00";
console.log(typeof(dead));
// 結果
stringtypeofで型を調べています。
stringということは文字列ですね。string vs timestamp、または、string vs Datetime など異なる型同士で比較しても思った通りの結果は返ってきません。
実は上記は僕の失敗例です…。型のことを意識してなかった（知らなかった）ため、予定時刻よりも早くフォームが閉じてしまい、大問題となりました…。
僕のような失敗をしないようにしてくださいm(_ _)m
とは言っても、冒頭のcodepenの通りやれば問題ありません！
まとめ
指定時刻で処理の分岐を行う方法を解説しました。
比較するときは『型を合わせること』がポイントです！