javascript - 带有时隙选择的 jQuery 日历

Question

<分区>

Answer 1

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

想法正在改变，我们正在创建新的 html 元素并附加到日期选择器。您需要根据需要修改设计。在 change 事件中调用 ajax 函数从 DB 中获取时间段。因为我可以看到您提供的链接也在做同样的事情。

附上代码:

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>