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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

919閲覧

javascript 時間比較について

---stax---

総合スコア148

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/12/07 00:47

編集2018/12/11 02:17

表題の件で質問させてください。
Webアプリ上で「Flatpickr」というカレンダーを使用しております。
Flatpickr

目的としてはカレンダーを2つ並べて1つめのカレンダーはAM06:00~PM18:00まで、2つ目のカレンダーはPM18:00~AM06:00までを選択できるようにしたいと考えています。
各カレンダーはその範囲の時間以外は指定できないようにしたいです。

ただ、Flatpickrの機能で時間範囲選択が出来るのですがAM06:00~PM18:00という制限は出来るのですが、PM18:00~AM06:00までのような日付をまたいでしまうような制限は設定できませんでした。

元々選択できないようにできれば一番いいのですがそれが無理そうなのでカレンダー上で選択された時間の結果のDate型から時間だけを抜き出せたら「選択された時間はカレンダー②の指定範囲外です」のような警告が出せるのかもと思ったのですが、Date型から時間だけを抜き出す方法、比較元になる「PM18:00~AM06:00」のような範囲の作り方が分からず悩んでいます。
一般的な例ではないと思うのですがどのようにすればよいのか思いつかず、もっとほかにも良い方法があるかと思いますのでアドバイス頂きたいです

以下カレンダー部分のコードです

js

1//グローバル変数 2var enable_dates1 = ['']; 3var enable_dates2 = ['']; 4var select_date1; 5var select_date1_2; 6var select_date2; 7var aaa; 8 9//flatpickr コンフィグ設定 10//1 開始側カレンダー 11const config1 = { 12 enableTime: true, 13 dateFormat: "Y-m-d H:i", 14 maxDate: "today", 15 minTime: "07:00", 16 maxTime: "19:20", 17 locale: 'ja', 18 onClose: function() { 19 select_date1 = this.selectedDates; 20 var str_date1 = select_date1.toLocaleString(); 21 var enable_date1 = str_date1.slice(0, 10); 22 console.log(select_date1); 23 console.log(str_date1); 24 //console.log(enable_date1); 25 enable_dates1[0] = enable_date1; 26 //console.log(enable_dates); 27 fp1_2.set('enable', enable_dates1); 28 } 29}; 30 31//1 終了側カレンダー 32const config1_2 = { 33 enableTime: true, 34 dateFormat: "Y-m-d H:i", 35 maxDate: "today", 36 minTime: "07:00", 37 maxTime: "20:20", 38 enable: enable_dates1, 39 locale: 'ja', 40 onClose: function() { 41 console.log(enable_dates1); 42 select_date1_2 = this.selectedDates; 43 } 44}; 45 46//2 開始側カレンダー 47const config2 = { 48 enableTime: true, 49 dateFormat: "Y-m-d H:i", 50 maxDate: "today", 51 locale: 'ja', 52 onClose: function() { 53 54 select_date2 = this.selectedDates; 55 var str_date2 = select_date2.toLocaleString(); 56 console.log(str_date2); 57 var enable_date2 = str_date2.slice(0, 10); 58 var check2 = str_date2.slice(-8); 59 console.log(check2); 60 enable_dates2[0] = enable_date2; 61 fp2_2.set('enable', enable_dates2); 62 } 63}; 64 65//2 終了側カレンダー 66const config2_2 = { 67 enableTime: true, 68 dateFormat: "Y-m-d H:i", 69 maxDate: "today", 70 enable: enable_dates2, 71 locale: 'ja', 72 onClose: function() { 73 console.log(enable_dates2); 74 select_date2_2 = this.selectedDates; 75 } 76}; 77 78 79 80//flatpickr インスタンス作成 81const fp1 = flatpickr('#pickr1', config1); 82const fp1_2 = flatpickr('#pickr1_2', config1_2); 83const fp2 = flatpickr('#pickr2', config2); 84const fp2_2 = flatpickr('#pickr2_2', config2_2);

以下使用ライブラリです
CSSフレームワーク
Flatpickr
jquery

html

1<div class="columns"> 2 <div class="column is-full"> 3 <div style="background-color: #87CEFA"> 4 1 日付選択 5 </div> 6 </div> 7 </div> 8 <div> 9 <input class="flatpickr" id="pickr1" type="text" placeholder="日付選択" readonly="readonly" ><input class="flatpickr" id="pickr1_2" type="text" placeholder="日付選択" readonly="readonly"> 10 </div> 11 <br> 12 <div class="output_button"> 13 <div class="control"> 14 <form method='POST' id='myform1'><input class="button is-info is-outlined is-large" type='submit' value='1直:出力' /></form> 15 </div> 16 <div id="area1"></div> 17 <br> 18 <div class="columns"> 19 <div class="column is-full"> 20 <div style="background-color: #98FB98"> 21 2 日付選択 22 </div> 23 </div> 24 </div> 25 <div> 26 <input class="flatpickr" id="pickr2" type="text" placeholder="日付選択" readonly="readonly"><input class="flatpickr" id="pickr2_2" type="text" placeholder="日付選択" readonly="readonly"> 27 </div> 28 <br> 29 <div class="control"> 30 <form method='POST' id='myform2'><input class="button is-success is-outlined is-large" type='submit' value='2直:出力' /></form> 31 </div> 32 <div id="area2"></div> 33 <br>

2018/12/11 追記①
頂いた回答を元に比較部分を作りました

ただ、ひとつ問題があって、上記の変数test1,2はwebアプリ上のカレンダーで指定された時間を取得した値を当てはめるのですが、'7:00:00'では動作せず'07:00:00'のように先頭に0が付いていなければ動作しませんでした。
先頭に0を付けてスライスしようとしたのですが、カレンダーから取得した値は' 7:00:00'のように先頭にスペースが入っており、1時~9時までは先頭に0を付けるために桁数を数えて条件分岐させようとしたのですが上手くいきません・・・。
このような場合はどう考えるのが良いでしょうか?
初歩的で申し訳ありませんがアドバイスお願い致します。

js

1 2var test1 = '7:00:00'; 3var test2 = '12:00:00'; 4 5var time_1 = moment().year(1991).month(01).date(01).hour(07).minutes(00).second(00) 6var time_2 = moment().year(1991).month(01).date(01).hour(19).minutes(20).second(00) 7var time_3 = moment().year(1991).month(01).date(01).hour(24).minutes(00).second(00) 8var time_4 = moment().year(1991).month(01).date(01).hour(24).minutes(00).second(00) 9 10 11var t_1 = time_1.format('HH:mm:ss') 12var t_2 = time_2.format('HH:mm:ss') 13var t_3 = time_3.format('kk:mm:ss') 14var t_4 = time_3.format('HH:mm:ss') 15 16 17if((test1 >= t_1) && (test1 <= t_2) && (test2 >= t_1) && (test2 <= t_2)){ 18console.log('ok') 19}else{ 20console.log('ng') 21} 22

2018/12/11 追記②
カレンダー部分で選択された情報は以下のような状態です(コンソール結果:変数select_date1)

js

1Array [ Date 2018-12-10T22:20:00.000Z ] 2 30: "2018-12-10T22:20:00.000Z" 4length: 1 5<prototype>: Array []

カレンダーからの入力は以下のように加工しています
moment.jsを使えばフォーマット指定で0が先頭につけれると思ったのですが
"YYYY-MM-DD HH:mm:ss"のようにフォーマットを指定してもHHは先頭に0が付かず、ss部分に関しては一桁しか取得できません。
参考サイト
フォーマットの指定は間違っていないと思うのですが何が原因でしょうか・・・?

js

1onClose: function() { 2 select_date1 = this.selectedDates; //選択されたデータ取得 3 var str_date1 = select_date1.toLocaleString(); //文字列変換 4 check1 = (str_date1.slice(-8)); //時刻部分だけ切り出し(追記①の状態:先頭0がつけれない) 5 6 var e = moment(str_date1, "YYYY-MM-DD HH:mm:ss"); 7 var hour = ('0' + e.hours()).slice(-2); //7 ⇒ 0 + 7 = 07としている 8 var min = e.minute(); //20 9 var sec = e.second(); //0 10 var time1 = hour + ':' + min + ':' + sec;

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/12/07 01:04

htmlもご提示ください。
---stax---

2018/12/07 01:17

かなりつたないですがhtmlも追記させて頂きました。またライブラリなどはCDNではなくローカルにダウンロードしたものを使用しているので記述しておりません。宜しくお願い致します
m.ts10806

2018/12/07 01:33

了解です。プラグイン・ライブラリの公式サイトへのリンクがあれば充分かと思います。
---stax---

2018/12/07 01:45

返答ありがとうございます。リンク追記致しました。宜しくお願い致します
guest

回答3

0

「PM18:00~AM06:00」のような範囲の作り方

「18時から24時 もしくは 0時から6時」とすればよいです。

【Date.prototype.getHours() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours

【Date.prototype.getMinutes() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getMinutes

投稿2018/12/07 03:19

編集2018/12/07 03:19
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

---stax---

2018/12/12 05:22

回答ありがとうございます 返答遅くなり申し訳ありません 頂いた回答を元に範囲を作成し所望の結果を得ることが出来ました ありがとうございました
guest

0

ベストアンサー

内容流し読み程度しかしていないのですが、時間関係を扱うのでしたらmoment.jsというライブラリが有用です。(どこまで要件に対応可能かは検証してみてください)

投稿2018/12/07 01:06

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

---stax---

2018/12/11 01:12

回答ありがとうございます 返答遅くなってすいません moment.jsと上の方の回答を合わせて比較部分を作りました var test1 = '7:00:00'; var test2 = '12:00:00'; var time_1 = moment().year(1991).month(01).date(01).hour(07).minutes(00).second(00) var time_2 = moment().year(1991).month(01).date(01).hour(19).minutes(20).second(00) var time_3 = moment().year(1991).month(01).date(01).hour(24).minutes(00).second(00) var time_4 = moment().year(1991).month(01).date(01).hour(24).minutes(00).second(00) var t_1 = time_1.format('HH:mm:ss') var t_2 = time_2.format('HH:mm:ss') var t_3 = time_3.format('kk:mm:ss') var t_4 = time_3.format('HH:mm:ss') if((test1 >= t_1) && (test1 <= t_2) && (test2 >= t_1) && (test2 <= t_2)){ console.log('ok') }else{ console.log('ng') } ただ、ひとつ問題があって、上記の変数test1,2はwebアプリ上のカレンダーで指定された時間を取得した値を当てはめるのですが、'7:00:00'では動作せず'07:00:00'のように先頭に0が付いていなければ動作しませんでした。 先頭に0を付けてスライスしようとしたのですが、カレンダーから取得した値は' 7:00:00'のように先頭にスペースが入っており、1時~9時までは先頭に0を付けるために桁数を数えて条件分岐させようとしたのですが上手くいきません・・・。 このような場合はどう考えるのが良いでしょうか? 初歩的で申し訳ありませんがアドバイスお願い致します。
m.ts10806

2018/12/11 01:18

コードは質問本文に追記してください。 また、moment()利用で時間だけ分だけ秒だけを取り出すことも容易に出来るはずなので スライスで0埋めしようとするのではなく、あくまで時間の取り扱い方の中で対応するようにしてみてください。
---stax---

2018/12/11 02:20

返答ありがとうございます 質問文に追記、更新致しました。 moment.jsのフォーマットで指定して0が先頭についた状態で抜き出そうと思ったのですが思ったような動作が出来ませんでした。結局時間に関しては0埋めのようになってしまっています・・・。質問文に追記させて頂きましたのでよろしければアドバイスお願い致します。
guest

0

結局0を足してスライスで切り出すという方法しか思いつかなかった
動作自体は所望の動きが出来ているが、momentでフォーマット指定しているが先頭に0が付かない原因は分からず

onClose: function() {
select_date1 = this.selectedDates; //カレンダーからの入力データ
var str_date1 = select_date1.toLocaleString(); //文字列変換

//チェック変数作成 var e1 = moment(str_date1, "YYYY-MM-DD HH:mm:ss"); var hour1 = ('0' + e1.hours()).slice(-2); var min1 = ('0' + e1.minute()).slice(-2); var sec1 = ('0' + e1.second()).slice(-2); check1 = hour1 + ':' + min1 + ':' + sec1;

投稿2018/12/12 05:20

---stax---

総合スコア148

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問