带时隙的jQuery日历选择 [英] jQuery Calendar with Time Slots selection

问题描述

我想在PHP中创建一个约会预订功能。我想要一个日历，用户可以在其中选择日期，作为回报，日历显示要选择的时间段。

I want to create an Appointment Booking feature in PHP. I want to have a calender in which user can select date and in return calender shows the time slots to select.

时段将是静态的，将来可能是动态的。

Time slot will be static, it might be dynamic in future.

您可以查看下面的示例链接。

You can check the example on below link.

https://getbooked.io/

通过互联网搜索此类插件，但找不到。 （我需要一个免费的插件）。

Searched over the internet for such kind of plugins, but could not find. (I need a free plugin).

推荐答案

请检查这个
http://jsfiddle.net/Xx4GS/258/

这个想法是关于更改我们正在创建新的html元素并附加到datepicker。您需要根据需要修改设计。在change事件中调用ajax函数以从DB获取时隙。因为我可以看到你提供的链接也是这样做的。

The idea is on change we are creating the new html element and appending to the datepicker. You need to modify the design according to your need. Call the ajax function in the change event to fetch the time slot from DB. because I can see that the link you gave is also doing the same.

附加代码：

var $datePicker = $("div#datepicker");

var $datePicker = $("div");

$datePicker.datepicker({
    changeMonth: true,
    changeYear: true,
    inline: true,
    altField: "#datep",
}).change(function(e){
    setTimeout(function(){   
        $datePicker
            .find('.ui-datepicker-current-day')
            .parent()
            .after('<tr>\n\
                        <td colspan="8">\n\
                            <div> \n\
                                <button>8:00 am – 9:00 am </button>\n\
                            </div>\n\
                            <button>9:00 am – 10:00 am</button>\n\
                            </div>\n\
                            <button>10:00 am – 11:00 am</button>\n\
                            </div>\n\
                        </td>\n\
                   </tr>');

    });
});
<div id="datepicker"></div>

这篇关于带时隙的jQuery日历选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！