表題の件で質問させてください。
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 3→0: "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;
回答3件
あなたの回答
tips
プレビュー