javascript - datetimepicker中的约会释放/锁定控制

Question

我已经将 xdsoft datetimepicker 作为我的框架来编写约会系统。我的基本想法是从 sql 数据库中获取所有配置参数和约会，到目前为止效果很好，但问题仍然是灵 active ，例如，如果我只想允许特定日期的特定时间，它总是被应用于所有天而不仅仅是特定的一天。如果我想禁用特定时间，它也会一直被禁用所有天。到目前为止我配置的是我用 PHP 计算所有内容并直接在 datetimepicker ini 中回显所有选项。那是我的代码:

<?php
echo'
    <script> //conf calendar
                        var reserviert = $.parseJSON(\''.$reserved.'\'); //here in this var I get all appointments from sql as a json and parse it afterwards
                        window.onerror = function(errorMsg) {$("#console").html($("#console").html()+"<br>"+errorMsg)}
                        $.datetimepicker.setLocale("de");
                        var logik = function( currentDateTime ){  //logic for specific weekdays
                            switch(currentDateTime.getDay()){
                                case 1:
                                    this.setOptions({
                                      minTime: '.$confIn['min1'].',
                                      maxTime: '.$confIn['max1'].',
                                      allowTimes: ['.$confIn['allow1'].'] 
                                    });
                                break;
                                case 2:
                                    this.setOptions({
                                      minTime: '.$confIn['min2'].',
                                      maxTime: '.$confIn['max2'].',
                                      allowTimes: ['.$confIn['allow2'].']
                                    });
                                break;
                                case 3:
                                    this.setOptions({
                                      minTime: '.$confIn['min3'].',
                                      maxTime: '.$confIn['max3'].',
                                      allowTimes: ['.$confIn['allow3'].']
                                    });
                                break;
                                case 4:
                                    this.setOptions({
                                      minTime: '.$confIn['min4'].',
                                      maxTime: '.$confIn['max4'].',
                                      allowTimes: ['.$confIn['allow4'].']
                                    });
                                break;
                                case 5:
                                    this.setOptions({
                                      minTime: '.$confIn['min5'].',
                                      maxTime: '.$confIn['max5'].',
                                      allowTimes: ['.$confIn['allow5'].']
                                    });
                                break;
                                case 6:
                                    this.setOptions({
                                      minTime: '.$confIn['min6'].',
                                      maxTime: '.$confIn['max6'].',
                                      allowTimes: ['.$confIn['allow6'].']
                                    });
                                break;
                                case 7:
                                    this.setOptions({
                                      minTime: '.$confIn['min7'].',
                                      maxTime: '.$confIn['max7'].',
                                      allowTimes: ['.$confIn['allow7'].']
                                    });
                                break;
                                default:
                                    this.setOptions({
                                         minTime: false,
                                         maxTime: false,
                                         allowTimes: []
                                    });
                            }
                        };

                        $("#datetimepicker3").datetimepicker({
                            '.$blocked.' //blocking weekened
                            inline:true,
                            value: new Date(),
                            allowTimes:['.$weekdatetimeconf['onlyT'].$timeFlex.'], //allowing times, general + flex conf, i should do it in one variable, still need to change it though
                            allowDates: ['.$weekdatetimeconf['onlyD'].$dateFlex.'], // lockes everything except specific date
                            disabledDates: ['.$weekdatetimeconf['banD'].'], // lock specific date
                            disabledWeekDays:['.$weekdatetimeconf['banweekdays'].'], //lock specific weekdays
                            step: '.$allg[0]['terminspanne'].', // min
                            todayButton: true,
                            yearStart: "'.date("Y").'",
                            yearEnd: "'.date('Y', strtotime('+1 year')).'",
                            dayOfWeekStart: 1,
                            onChangeDateTime: logik,
                            onShow: logik,
                            onSelectTime(dp,$input){ //still under construction
                                if($.inArray($input.val(), reserviert)){
                                    alert("reserved!");
                                }
                            },
                            minDate: "0",
                            maxDate: "'.date("Y/m/d", maxDate($freigabe)).'",
                            minTime: "'.date("H:i", strtotime($allg[0]['minOeffnungszeit'])).'",
                            maxTime: "'.date("H:i", strtotime($allg[0]['maxOeffnungszeit'])).'",


    });</script>';</php>

到目前为止 ini，我还在问自己是否有某种更好的解决方案来管理日期时间选择器中的空闲/锁定时间，因为我的有太多需要修复的错误。有人有更好的主意吗？

Answer 1

这不是最灵活的解决方案，但仍然是解决在 JQuery 中将时间锁定在特定日期的问题的好方法

<script>
var specificDates = []; 
var hoursToTakeAway = [];
var i=0; var old=0; var from; var collect=[]; var changed = false; var bag=[];
                    $.each( reserviert, function(key, value){
                        specificDates.push(moment(key).format("DD/MM/YYYY")); 
                        $.each( value, function( keyn, valuen ){
                            if(i !== old){
                                old=i;
                                changed = true;
                            }
                            if(i == old){
                                if(keyn.indexOf("from") >= 0){
                                    from = valuen;
                                } else{
                                    bag = addBetween(parseInt(from), parseInt(valuen));
                                    if(changed == false){
                                        collect = bag.concat(collect);  
                                    } else collect = bag;
                                }
                            }
                        });
                        hoursToTakeAway.push(collect);
                        i++;        
                    });
                    function addBetween(p1, p2){
                        var hoursToAdd=[];
                        for(var i=p1; i<=p2; i++){
                            hoursToAdd.push(i);
                        }
                        return hoursToAdd;
                    }
</script>

代码位于 var reserviert 和 window.onerror 之间，并迭代以日期为键、时间为值的对象 reserviert。它被保存在数组 specificDates 和 hoursToTakeAway 中。我锁定了我从数组中得到的时间

<?php 
    echo '$("#datetimepicker3").datetimepicker({
                                        onGenerate:function(ct,$i){
                                            var ind = specificDates.indexOf(moment(ct).format("DD/MM/YYYY"));
                                            $(".xdsoft_time_variant .xdsoft_time").show();
                                            if(ind !== -1){
                                                $(".xdsoft_time_variant .xdsoft_time").each(function(index){
                                                    if(hoursToTakeAway[ind].indexOf($(this).text()) !== -1) {
                                                        $(this).hide();
                                                    }
                                                });
                                            }
                                            '.$blocked.'
                                        },
                                        inline:true,
                                        value: new Date(), //(alloweDateRe)(regexdates)
                                        allowTimes:['.$weekdatetimeconf['onlyT'].$timeFlex.'], 
                                        allowDates: ['.$weekdatetimeconf['onlyD'].$dateFlex.'], 
                                        disabledDates: ['.$weekdatetimeconf['banD'].'], 
                                        disabledWeekDays:['.$weekdatetimeconf['banweekdays'].'], 
                                        step: '.$allg[0]['terminspanne'].', // min
                                        todayButton: true,
                                        yearStart: "'.date("Y").'",
                                        yearEnd: "'.date('Y', strtotime('+1 year')).'",
                                        dayOfWeekStart: 1,
                                        onChangeDateTime: logik,
                                        onShow: logik,
                                        minDate: "0",
                                        maxDate: "'.date("Y/m/d", maxDate($freigabe)).'",
                                        minTime: "'.date("H:i", strtotime($allg[0]['minOeffnungszeit'])).'",
                                        maxTime: "'.date("H:i", strtotime($allg[0]['maxOeffnungszeit'])).'"
                                    });'; 
?>