jonthorntonのtimepicker jqueryプラグインを使用して特定の時間を動的に無効にする

タイトルによれば、Firebaseデータベースから取得している時間を動的に無効にする必要があります。jonthorntonのtimepicker jqueryプラグインを使用して特定の時間を動的に無効にする

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="jquery/jquery-ui.css" /> 
    <script src="jquery/jquery-1.9.1.js"></script> 
    <script src="jquery/jquery-ui.js"></script> 
    <link rel="stylesheet" href="timepicker/jquery.timepicker.css"> 
    <script src="timepicker/jquery.timepicker.min.js"></script> 
</head> 
<body> 
    <input type="text" id="timepicker" placeholder="Select time"> 
    <script> 
     /*Initialize Firebase*/ 
     var db = firebase.database().ref(); 
     var s, f, pairs=Create2DArray(100); 
     var pair = [ ['00:00', '10:00'], ['17:00', '23:00'] ]; 
     firebase.database().ref("Path/To/Parent/Of/Date/"+"20-11-2017"/*access the path to date in the databse(time's parent)*/).once('value').then(function(snapshot){ 
      snapshot.forEach(function(child) { 
       s = JSON.stringify(child.key); //the start of disabled time 
       f = JSON.stringify(child.val()); // the end of disabled time 
       pairs.push([s, f]); 
       console.log("Pairs:" + pairs); 
      }); 
     }); 
     function Create2DArray(rows) { 
      var arr = []; 

      for (var i=0;i<rows;i++) { 
       arr[i] = []; 
      } 

      return arr; 
     } 
     jQuery(function(){ 
      $('#timepicker').timepicker({ 'timeFormat': 'H:i', 'step':'10','forceRoundTime': true}); 
      $('#timepicker').timepicker('option', { 
       'disableTimeRanges': pairs //if i use here the pair array instead it works, but I need to disable the dates dynamically, and probably multiple times 
      }); 
     }); 
    </script> 
</body>

私はペアの配列が間違って作成していたとしますが、私はそれが間違っている場所を見つけ出すように見えることはできません。私はそれをうまく説明できないので、ここでのコードです。

出典

2017-11-21 user8970853

私はあなたがする必要があることを理解していませんが、Firebase APIがAsyncだと思います。

toClandar(){ 
    $(function(){ 
     $('#timepicker').timepicker({ 'timeFormat': 'H:i', 'step':'10','forceRoundTime': true}); 
     $('#timepicker').timepicker('option', { 
      'disableTimeRanges': pairs 
     }); 
    }); 
}

APIコールバック内の関数を呼び出したより：

firebase.database().ref("Path/To/Parent/Of/Date/"+"20-11-2017"/*access the path to date in the databse(time's parent)*/).once('value').then(function(snapshot){ 
    snapshot.forEach(function(child) { 
     s = JSON.stringify(child.key); //the start of disabled time 
     f = JSON.stringify(child.val()); // the end of disabled time 
     pairs.push([s, f]); 
     console.log("Pairs:" + pairs); 
     //callback 
     toCalendar(); 
     //end callback 
    }); 
});

を

は、コールバック関数を作成します：APIが非同期であれば、あなたはfirebase APIコールバックの内側にdataPikerの初期化を移動する必要がありますこのようにしてペア配列は、データベースからpikedしたデータで評価されます。

出典

2017-11-21 12:47:50 Frogmouth

これは私のコードのバグの1つでした。 JSON.stringify（）も削除されましたが、今は完全に動作しています。ありがとうございました。 – user8970853

あなたは歓迎です – Frogmouth

jonthorntonのtimepicker jqueryプラグインを使用して特定の時間を動的に無効にする

答えて

関連する問題