使用 jonthornton 的 timepicker jquery 插件动态禁用特定时间

Question

正如标题所说，我需要动态禁用从 firebase 数据库获取的某些时间。我不能很好地解释它，所以这是代码：

<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>

我想我创建的 pairs 数组是错误的，但我似乎无法弄清楚哪里错了。

Answer 1

我不确定您需要做什么，但我认为 firebase API 是异步的。如果 API 是异步的，则必须将 dataPiker 初始化移动到 firebase API 回调中：

创建回调函数：

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
   });
});

通过这种方式，您可以将数组与您从数据库中提取的数据配对。

使用 jonthornton 的 timepicker jquery 插件动态禁用特定时间

Dynamically disable certain time using jonthornton's timepicker jquery plugin

javascript

jquery

datetimepicker

timepicker