jquery滑块，时间选择器和保留时间.. [英] jquery slider, time picker and reserved times..

问题描述

我正在使用jquery滑块选择开始和结束时间
这很好，但是我需要添加限制。
基本上，我有一个可用的窗口，我需要削减。
所以在我的例子中：
http://madeeasyfor.me/stackoverflow/time_pick_test_1 .html

I am using a jquery slider to pick a start and end time That is fine, but I need to add restrictions to it. Basically, I've got a window of availability that I need to chip away at. So in my example: http://madeeasyfor.me/stackoverflow/time_pick_test_1.html

（我已经评论了验证函数，以便您可以看到滑块，代码具有所有脚本的绝对路径，以便随时获取查看源转储本地使用）

(I've commented the validation function so you can see the slider, the code has absolute paths to all scripts so feel free to get a view source dump for local use)

我有一个24时钟。
使用动态生成的PHP脚本，我想添加各种预定的时间..所以当用户尝试选择预先预定的时间时，他们会收到错误（弹出，无论如何）。
现在，我很难编写我的预订时间。

I've got a 24 clock. With a dynamically generated PHP script, I want to add various booked times.. so when the user tries to select a pre booked time, they'll get an error (pop up, whatever). For now, I'm hard coding my booked times.

我的生活似乎无法让滑块识别预订时间选择。

I can't for the life of me seem to get the slider to recognise the pre booked times selected.

如果我不清楚任何内容，请问...
我可以在PHP中进行检查，一旦用户选择了时间，但我希望用户立即意识到。
（理想情况下，我想为幻灯片标记预订的时间，但这是另一个问题...; -p

If I'm not clear about anything, please ask... I could just do the checks in PHP once the user has selected a time, but I'd like the user to be instantly made aware. (Ideally, I'd like to colour the slide bar to flag the prebooked times.. but that's another issue... ;-p

Tris。

推荐答案

尝试在jQuery UI中使用slide事件（ http://jqueryui.com/demos/slider/#event-slide ）当用户滑动句柄时，幻灯片事件被触发在幻灯片事件中，您可以检查所选时间是否预先存储，如果为true，则返回false。当幻灯片事件返回false时，用户无法将该句柄滑动到该位置。

Try using the 'slide' event in jQuery UI (http://jqueryui.com/demos/slider/#event-slide). When the user slides the handle, the slide event is triggered. In the slide event you can check if the selected time is pre booked, if true, you can return false. When the slide event returns false, the user isn't possible to slide the handle to that point.

例如：
这样可以防止用户选择40到50之间的东西：

For example: This prevents the user from selecting something between 40 and 50:

$('#slider').slider({
    range: true,
    values: [17, 67],
    slide: function(event, ui) {
        if(ui.value > 40 && ui.value < 50){
            return false;
        }
    }
});

这篇关于jquery滑块，时间选择器和保留时间..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！