Question

我使用XDSoft非常好jQuery datetimepicker plugin。

在选项中，我设置方法onSelectDate，当用户从 datepicker 中选择日期时触发该方法，我想要询问数据库，是否有该日期的某些预留时间以及是否所以，从 timepicker 中删除那些时间，这样用户就无法选择它们。

我遇到隐藏保留时间的问题。看来，改变包含元素的风格不起作用。我尝试了addClass('hidden')，fadeOut()，hide()甚至css('color','red)都无效。但是，当我发出console.log($(this).html())时，我发现，该元素已被正确定位。

选择时间的Html元素由插件动态添加，如下所示：

<div class="containing datetime picker elements">
  ...
    <div class="xdsoft_time " data-hour="9" data-minute="30">09:30</div>
    <div class="xdsoft_time " data-hour="10" data-minute="00">10:00</div>
  ...
</div>

我的jQuery代码隐藏它：

onSelectDate: function() {

    var dennyTimes = [    //test array, instead database call
        0900,
        1100,
        1200,
        2100
        ];

    $('.xdsoft_time_box .xdsoft_time').each(function () {
        var that = $(this);
        var hour = that.data('hour');
        var time = hour * 100 + that.data('minute'); // time as integer

        that.show();            

        var i = dennyTimes.length;      
        while(i) {
        i--;
        //assume that times in dennyTimes are start time
        //of a reserved event and event is nearly one hour long,
        //so if it begins at 800, it ends nearly at 900
        if (time >= dennyTimes[i] && time < dennyTimes[i] + 100)
            that.hide();        
        }
    });
}

我认为这段代码应该没问题。我的猜测是，datetimepicker是以一种错误的方式动态创建的，这阻止了我改变风格，但我不知道。你呢？

Answer 1

找到可行的解决方案。

首先，我将所有选项移到变量var datetimepickerOptions中，然后使用

初始化插件

$('#datepicker_input').datetimepicker(datetimepickerOptions);

在我编写onSelectDate函数的选项中，将可用时间数组作为本机allowTimes属性附加到datetimepickerOptions中，然后使用扩展选项重新初始化datetimepicker插件。

编辑：添加完整代码：

var datetimepickerOptions = {
    lang: 'cs',
    format: 'd. m. Y H:i',
    step: 30,
    minTime: '8:30',
    maxTime: '17:30',
    minDate: '+1970/01/02', //tomorrow
    maxDate: '+1970/05/01', //five months ahead
    dayOfWeekStart: 1,      //week begins with monday
    onSelectDate: function(current) {       
        initDaytimePicker(current);
    }
};

function initDaytimePicker(date) {
    $.ajax({
        url: '//' + window.location.hostname + '/api',
        data: 'date=' + encodeURIComponent(date),
        success: function(data) {
            datetimepickerOptions.allowTimes = data;            
        },
        complete: function () {
            $('#datepicker_input').datetimepicker(datetimepickerOptions);
        }
    });
}

//initialize at page load with todays date
initDaytimePicker(new Date);

这很好用，所以我认为它已经解决了。

无法更改datetimepicker元素的样式

1 个答案:

编辑：添加完整代码：