質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 4,557

score 88

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

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

あるエクセルシートを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
******
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

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

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

ちなみに、日付の扱い方はこちら↓
日付と時刻の計算 (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 とかは範囲内に入りません。)

なので、終了日に+1日して 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() ){
  // グーグルマップに表示
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/18 11:16

    お世話になっております。
    >んー、YYが2桁だとブラウザやバージョンによって生成される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タイムを取ることはできたのですが、やはりライブラリを使うことで、簡単に実装してもそのライブラリを全て理解するのは難しいので、手書きで作成したいと考えております。

    キャンセル

  • 2015/09/18 14:34

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

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

    キャンセル

  • 2015/09/18 17:29

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

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

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

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

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

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

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/14 14:38

    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

    キャンセル

  • 2015/09/14 14:45

    追記致します

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

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

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

    キャンセル

  • 2015/09/14 14:50

    あ、失礼しました。
    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]);

    とする必要があります。

    キャンセル

0

横から失礼

特に何かの縛りがないのであれば、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{
    //    非表示
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/14 18:30

    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にすればとれるということでしょうか?

    キャンセル

  • 2015/09/15 14:28

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

    キャンセル

  • 2015/09/17 21:09

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る