jquery - 无法更改 datetimepicker 元素的样式

Question

<小时/>

我用的很好jQuery datetimepicker plugin由 XDSoft 提供。

在选项中，我设置了方法onSelectDate，当用户从datepicker中选择日期时会触发该方法，并且我想询问数据库是否有一些保留时间日期，如果是，请从时间选择器中删除该时间，这样用户就无法选择它们。

我在隐藏保留时间时遇到了问题。看来，改变包含元素的样式不起作用。我尝试了 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 函数，它将可用时间数组作为 native 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);

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