JSONの時間をjavascriptで比較したい

Question

お世話になっております。

全体的な流れを説明致します。

あるエクセルシートをphpでjsonにエンコードして、そのjsonファイルをjavascriptで処理をしてグーグルマップに表示するという機能を実装しているのですが、jsonファイルの中に日付が入っており、その日付を利用して、何日～何日まで、グーグルマップ上に表示するという機能を実装したいのですが、jsonファイルの日付をdateクラスに変換ができなくて困っています。

ご教授いただければ幸いです。

----------------【追記】 9/11 19：02------------------------------

上の行は現在の日時を取って出力したものです（下記コード記載）
下の行はjsonファイルの中身をそのまま表示したものです

上の行のコード*****
var month = dt.getMonth()+1;
var day = dt.getDate();
var year = dt.getFullYear();
console.log(month + '-' + day + '-' + year);

---

コンソールログの表示********
9-11-2015

09-08-15

---

Answer 1

日付のフォーマットが解析できないか、JSONからの取得に失敗しているか、、、
ではないですか？？
もしくは、その前にJSONファイルに変換している部分で失敗しているか。

どこまで確認がとれてて、どうなっているかを１つずつ確認したほうがよいかと思われます。

ちなみに、日付の扱い方はこちら↓
日付と時刻の計算 (JavaScript)

---

<追記>

やりたいことは、この「ページを表示した日が開始日から終了日の期間内だったらマップ上に表示したい」ということですよね？
であれば、

if( 開始日 && 終了日 )

ではなく、
今日の日付をとって、

if(開始日 <= 今日 && 今日 <= 終了日 )

というロジックになるかと思います。

jsonファイルの値（Excelを変換したもの）
"H":"09-08-15","I":"09-09-15",

という形式でしたら、それぞれをDate型にすると

var start = new Date(data[i]["H"]);  // Tue Sep 08 2015 00:00:00 GMT+0900 (東京 (標準時))
var end   = new Date(data[i]["I"]);  // Wed Sep 09 2015 00:00:00 GMT+0900 (東京 (標準時))
var today = new Date();              // Mon Sep 14 2015 15:11:06 GMT+0900 (東京 (標準時))

となります。(出力結果はそれぞれを toString() したものです)

日付が特定範囲以内に含まれるかどうかを判定するには、getTime()を使用して比較します。

ここで注意したいのは、JSONから作成したDateオブジェクトは 時間が "00:00:00" になっているというところです。
開始日はこれで問題ないのですが、終了日がこのままだと9/9 00:00:00 以降は関係ないものとなってしまいます。
（9/9 12:34 とかは範囲内に入りません。）

なので、終了日に＋１日して 9/10 00:00:00未満 にします。

end.setDate(end.getDate() + 1);   // Thu Sep 10 2015 00:00:00 GMT+0900 (東京 (標準時))

あとは getTime() で比較してあげればよいです。

if( start.getTime() <= today.getTime() && today.getTime() < end.getTime() ){
  //　グーグルマップに表示
}

Comments

[shinoda]

お世話になっております。

下記のようなコードなのですが、jsonに変換は問題なくできているので、受けてのjavascriptをどのようにすればよいかわからなくて困っています。

*****************
jsonファイルの値（Excelを変換したもの）
"H":"09-08-15","I":"09-09-15",
****************

*****************
data[i]["H"] → イベントが始まる日
data[i]["I"] → イベントが終わる日

if ((data[i]["H"]) && (data[i]["I"] → イベントが終わる日 )) {
google.maps.Marker#setVisible(true)　//　グーグルマップに表示
}
*****************

[kaputaros]

追記してみました。
条件の違いだと思いますよ。

[k.tada]

おぉ、"09-08-15"形式でもそのままnew Date()に渡せば正常にパースされるのか。。

shinodaさん、こちらの回答の通りで問題ないと思われます。

[shinoda]

お世話になっております。
丁寧な解説を含めたご回答ありがとうございます。

ご回答通りの方法を試したところクロームでは時間が取れたのですが、IEではなにもひょうじされず、firefoxではInvalid Dateとエラーが出ました。

[kaputaros]

失礼しました。
IEやFirefoxのバージョンによって "-" 区切りの日付はダメみたいです。
http://micronwave.hatenablog.jp/entry/20131030/1383134046

replace() などで"-"を"/"に変換してあげたほうがよさそうです。

[shinoda]

replaceの使い方が正しいかわかりませんが、以下の様な形でしょうか？
******************
$(function() {
var data = new Array();
$.getJSON("json/array.json" , function(data) {
//data = target.replace( /-/g , "/" ) ;
//console.log(data);
for( var i in data){
for( var j in data[i] ){
***************

[kaputaros]

詳しい使い方はこちらにあります↓
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

使い方は合ってると思います。
targetに何が入っているかわかりかねますが、
JSONのデータの日付の「-」を「/」に出来ればオッケーです。

[shinoda]

返信遅くなってしまい申し訳ありません.
下記のコードを実行した際
***********
TypeError: jdata.replace is not a function
***********

というエラーが出ました。jdataという関数がありませんという認識であっていますでしょうか？

jsonファイルを変換したものをjdataにしていると思うのですが間違っていますでしょうか？

******************
$(function() {
var jdata = new Array();
$.getJSON("json/array.json" , function(jdata) {
var data = jdata.replace( /-/g , "/" ) ;
//console.log(data);
for( var i in data){
for( var j in data[i] ){
***************

[kaputaros]

使い方が合っている･･･というところで齟齬がおきてしまったようですね。

jdataの中身がどのように返ってきているかをまず確認してみてください。
（おそらく配列のような形になっているかと思います。）

replace()はStringのような文字列の文字変換を想定していると思うので、
配列の中身をごっそり１回で･･･というのは多分ムリです。

data[i]["H"]で日付"09-08-15"を取り出してからreplaceをかけてあげてください。

自分の↑投稿を引用すると、

var repstr = data[i]["H"].replace( /-/g , "/" );
var start = new Date(repstr);

若しくは、一括して

var start = new Date(data[i]["H"].replace( /-/g , "/" ));

でいけると思います。

[shinoda]

お世話になっております。

＞jdataの中身がどのように返ってきているかをまず確認してみてください。
＞（おそらく配列のような形になっているかと思います。）

仰るとおりオブジェクトですが配列のような形です

＞replace()はStringのような文字列の文字変換を想定していると思うので、
＞配列の中身をごっそり１回で･･･というのは多分ムリです。

なるほど、そんなに便利な機能ではないんですね。

ご教授いただいた方法を試してみましたが以下の様なエラーが出ました。
中間値？というよくわからないエラーなのですがどのような意味でしょうか？

*************エラー***************
TypeError: (intermediate value).replace is not a function
****************************

*************
$(function() {
var data = new Array();
$.getJSON("json/array.json" , function(data) {
for( var i in data){
for( var j in data[i] ){
var start = new Date(data[i]["H"].replace( /-/g , "/" ));
var end = new Date(data[i]["I"].replace( /-/g , "/" ));
var today = new Date().replace( /-/g , "/" );

console.log(start);
console.log(end);
*******************

[shinoda]

お世話になっております。

ひとつ前の回答ですが自己解決しました。
******
var today = new Date().replace( /-/g , "/" );
******
上記を文字列で来ていないのにreplaceしようとしていたのでエラーが出ました。

修正して試したところクロームでは問題ないのですが、firefoxでは以下の様な表示がされました。
********************
Date 1915-09-07T15:00:00.000Z
Date 1915-09-08T15:00:00.000Z
Date 2015-09-17T12:55:08.855Z
*************

やはりjsonで渡す際に、MM-DD-YYとなっているのでうまくいかないようです。

[kaputaros]

んー、YYが２桁だとブラウザやバージョンによって生成されるDateが違ってきちゃうんですね。
IEでもダメでした。Chromeは2015年になってるんですけどね。。。
あとは、Javascriptで YYYY に無理やり修正してやるか･･･ですかね。

ちょっと思ったのですが、PHPでJSONに変換するときに、
日付の形式を"YYYY/MM/DD"にすることはできないでしょうか？？
この部分も自作されているのであれば、こちらで変換してしまった方が安定しそうな気がします。

[shinoda]

お世話になっております。
＞んー、YYが２桁だとブラウザやバージョンによって生成されるDateが違ってきちゃうんですね。
IEでもダメでした。Chromeは2015年になってるんですけどね。。。
あとは、Javascriptで YYYY に無理やり修正してやるか･･･ですかね。

→そうですね。やはりYYが2桁なのと、MM-DD-YYという形でそのままパースするというのは無理があるようですね。
以下のコードのように整形して比較というのが無難でしょうかね？
**********
var fromArray = data[i]["H"].split("/");
var from = new Date("20" + fromArray[2], fromArray[0], fromArray[1]);
**********

＞ちょっと思ったのですが、PHPでJSONに変換するときに、
日付の形式を"YYYY/MM/DD"にすることはできないでしょうか？？
この部分も自作されているのであれば、こちらで変換してしまった方が安定しそうな気がします。

→phpの部分も私が作っているのですが、もともとのデータになっているエクセルファイルが常に最新のものに更新するわけではないためこのような形にしました。

理想の流れで言えば、イベントの日付が過ぎたものはJSONに変換しないというのが良いと思うのですが、上記のように常に最新ファイルに更新ではないので、やはりフロント側で加工するのが、今回の事案ではベストかなと考えました。

また別の方の回答のライブラリを使うことでunixタイムを取ることはできたのですが、やはりライブラリを使うことで、簡単に実装してもそのライブラリを全て理解するのは難しいので、手書きで作成したいと考えております。

[kaputaros]

> 以下のコードのように整形して比較というのが無難でしょうかね？
> **********
> var fromArray = data[i]["H"].split("/");
> var from = new Date("20" + fromArray[2], fromArray[0], fromArray[1]);
> **********
splitする文字列は"/"ではなく、"-"ですね^^;

上の例だと西暦が必ず2000年以降になるという条件がついてしまいます。
それが保証できるのであれば、その方法でいいと思います。
ちなみに、JSONに変換する前のデータは"MM-DD-YY"になっているのですか？？
（多分そうなんだろうとは思うのですが、、、。）

[shinoda]

＞上の例だと西暦が必ず2000年以降になるという条件がついてしまいます。
それが保証できるのであれば、その方法でいいと思います。

とりあえずあと80年ぐらいは大丈夫ですが、完璧ではないので、修正していきたいと思います。

＞ちなみに、JSONに変換する前のデータは"MM-DD-YY"になっているのですか？？
（多分そうなんだろうとは思うのですが、、、。）

はい。phpExcelというライブラリを使っているので、なかなか変更するのも難しいので、フロント側で無理矢理やっています。

要件は満たしているので今後ブラッシュアップしていきたいと思います。

長い期間、親切・丁寧にお応えいただいて本当にありがとうございました。
またわからないことがあればご質問させていただくことがあるとは思いますが、どうぞ宜しくお願い致します。

この質問はクローズさせていただきます。
またベストアンサーとさせていただきます。

Answer 2

横から失礼

特に何かの縛りがないのであれば、JavaScriptでの日付・時刻の処理は素のDate()で行っていると何かと苦しいのでmoment.jsを使うのがおすすめです

その上で

• 入力される日付のフォーマットがYYYY-MM-DDで統一されている
• 表示されたときの秒単位ぐらいの精度で表示・非表示が切り替わればいい

という前提で以下のコードでどうでしょうか

//
// 時刻部分は00:00:00に補正されるので
// fromにはイベント開始日の00:00:00のUNIXタイムスタンプが入る
//
var from = moment(data[i]["H"], "YYYY-MM-DD").startOf('day').unix();
//
// 終了日は00:00:00だと困る(終了日いっぱいは表示したいので23:59:59まで)が好ましい
// toにはこれでイベント終了日の23:59:59のUNIXタイムスタンプが入る
//
var to = moment(data[i]["I"], "YYYY-MM-DD").endOf('day').unix();

//
// その上で比較はtimestamp値で行います
//
var current = moment().unix(); // 比較用の今現在の時刻のUNIXタイムスタンプ

//	現在時刻が開始日～終了日に入っている？
if((from <= current) && (current <= to)){
	//	表示
}else{
	//	非表示
}

Comments

[shinoda]

お世話になっております。
ご回答ありがとうございます。

＞入力される日付のフォーマットがYYYY-MM-DDで統一されている
上記の部分なのですが、別の回答で申し上げている通りにJSONファイルから日付が渡ってくるので以下の様な形になってしまいます。

************
"H":"09-08-15","I":"09-09-15",
************

ですので、先にYYYY-MM-DDに直す処理が必要ということでしょうか？

[khirose]

http://momentjs.com/docs/#/parsing/string-format/

ここにmoment.jsでサポートしている時刻フォーマットの一覧があります
見ると、年が2桁の場合はYYYY-MM-DDのところをYY-MM-DDに変更するだけで大丈夫っぽいです

[shinoda]

お世話になっております。
ご回答の通りに試しましたが以下の様な結果になりました

*****コンソールの表示******
1250262000
************************
******コード************
var from = moment(data[i]["H"], "YY-MM-DD").startOf('day').unix();
var to = moment(data[i]["I"], "YY-MM-DD").endOf('day').unix();
var current = moment().unix(); // 比較用の今現在の時刻のUNIXタイムスタンプ
//if((from <= current) && (current <= to)){
//}
console.log(from);
console.log(to);
*************************

[khirose]

1250262000 = 2009年8月15日 00:00:00のUNIXタイムスタンプなのでfromのほうは正常のようです(toのほうのconsole.log()の結果は出てないですか？)

この数値同士で日付が範囲内かどうかを判定します

[shinoda]

1250262000 = 2009年8月15日 00:00:00のUNIXタイムスタンプなのでfromのほうは正常のようです(toのほうのconsole.log()の結果は出てないですか？)

jsonのデータなのですが
************
"H":"09-08-15","I":"09-09-15",
************
上記は2015/9/8～2015/9/9という意味です。
YY-MM-DD→MM-DD-YYにすればとれるということでしょうか？

[khirose]

その通りです
「このフォーマットで解釈してください」ということができるのでこのケースはMM-DD-YYで生成できます

[shinoda]

お世話になっております。

ご教授頂いた方法でタイムスタンプを取ることができました。
unixタイムスタンプをdata型に変換する必要はないのでしょうか？

Answer 3

どのようなフォーマットの日付か分からないですが、new Date("2015/9/11 15:30:00")のような形でDateオブジェクトが作れないでしょうか？

各ブラウザでフォーマット出来る形式は下記が参考になるかと思います。（情報が古いかもですが）
http://so-zou.jp/web-app/tech/programming/javascript/grammar/object/date.htm

Comments

[shinoda]

お世話になっております。

下記のようなコードなのですが、jsonに変換は問題なくできているので、受けてのjavascriptをどのようにすればよいかわからなくて困っています。

*****************
jsonファイルの値（Excelを変換したもの）
"H":"09-08-15","I":"09-09-15",
****************

*****************
data[i]["H"] → イベントが始まる日
data[i]["I"] → イベントが終わる日

if ((data[i]["H"]) && (data[i]["I"] → イベントが終わる日 )) {
google.maps.Marker#setVisible(true)　//　グーグルマップに表示
}
*****************

[k.tada]

Hが2015年9月8日、Iが2015年9月9日を表しているという認識でよいでしょうか？

でしたら、new Date()の引数に年月日を渡してもDateオブジェクトが生成できるので、

```
var fromArray = data[i]["H"].split("-");
var from = new Date("20" + fromArray[2], fromArray[0], fromArray[1]);
```
のようにすればDateオブジェクトが生成出来るはずです。

※　jsonで渡される日付フォーマットが、必ず"月-日-年（下2桁）"というフォーマットであることが前提です。

[shinoda]

お世話になっております。

＞Hが2015年9月8日、Iが2015年9月9日を表しているという認識でよいでしょうか？

はい、その通りです。

下記のようにすればよろしいでしょうか？
**************************************
var fromArray = data[i]["H"].split("-");
var from = new Date("20" + fromArray[2], fromArray[0], fromArray[1]);

var toArray = data[i]["I"].split("-");
var to = new Date("20" + fromArray[2], fromArray[0], fromArray[1]);

if(from) && (to){
google.maps.Marker#setVisible(true)　//　グーグルマップに表示
}

***************************************

>jsonで渡される日付フォーマットが、必ず"月-日-年（下2桁）"というフォーマットであることが前提です。

上記のことに関しては、ヒューマンエラーを除けば大丈夫です。

[shinoda]

お世話になっております。

console.log("from");
で確認したところ単純にfromという文字列が帰ってきてしまいました。

[k.tada]

console.log("from");では、fromという文字列が表示されるのは当たり前ではないでしょうか？

また、現在日時がfrom〜toの日付の範囲内であることのチェックは
if ((from) && (to)) {
ではチェック出来ないです。
日付の比較には getTime メソッドを使用しましょう。

http://qiita.com/labocho/items/5fbaa0491b67221419b4#%E6%AF%94%E8%BC%83%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AF-gettime-%E4%BD%BF%E3%81%86

[shinoda]

追記致します

fromをダブルクオーテーションで囲っていました。
大変失礼致しました。

修正して出力したところ以下の様な日付がでました
***コンソールログの結果********
Date 2015-10-07T15:00:00.000Z
***************************

fromもtoも同じ結果が帰ってきています
全て見なおしたのですが、原因がわかりません。

[k.tada]

あ、失礼しました。
Javascriptの月は0はじまりなので、

var from = new Date("20" + fromArray[2], fromArray[0], fromArray[1]);

ではなく

var from = new Date("20" + fromArray[2], fromArray[0] - 1, fromArray[1]);

とする必要があります。