带有时隙选择的 jQuery 日历 [关闭]答案

【问题标题】：jQuery Calendar with Time Slots selection [closed]带有时隙选择的 jQuery 日历 [关闭]
【发布时间】：2016-12-24 00:37:21
【问题描述】：

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

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

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

https://getbooked.io/

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

【问题讨论】：

这个问题是off-topic (#4)，应该关闭。

标签： javascript php jquery datepicker

【解决方案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>

【讨论】：

【解决方案2】：

$('.date-picker-2').popover({
	html : true, 
	content: function() {
	  return $("#example-popover-2-content").html();
	},
	title: function() {
	  return $("#example-popover-2-title").html();
	}
});
$(".date-picker-2").datepicker({
	onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Avialable Appiontments</b>');
    	var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
    	$('#example-popover-2-content').html('Avialable Appiontments On <strong>'+dateText+'</strong><br>'+html);
    	$('.date-picker-2').popover('show');
    }
});

.popover {
	left: 40% !important;
}
.btn {
	margin: 1%;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>
</body>
</html>

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<style>
.popover {
    left: 40% !important;
}
.btn {
    margin: 1%;
}
</style>
</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>
<script>
$('.date-picker-2').popover({
    html : true, 
    content: function() {
      return $("#example-popover-2-content").html();
    },
    title: function() {
      return $("#example-popover-2-title").html();
    }
});
$(".date-picker-2").datepicker({
    onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Avialable Appiontments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Avialable Appiontments On <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    }
});
</script> 
</body>
</html>

这是显示您可以使用的可用约会的静态方法动态日期选择器的onSelect函数中的Ajax方法约会

【讨论】：

这实际上是一种更好的方式，看起来比接受的答案要好得多。它保持日期选择器的结构不变，并且弹出可用时间是一个明智的决定。

【解决方案3】：

试试 FullCalendar：http://fullcalendar.io/

这是一个功能齐全、免费、开源的 Javascript 日历插件。它非常灵活，可以完成您描述的所有事情。您需要做的工作是处理您想要的事件（例如，用户选择一个时间段）并将其连接到您的服务器端数据。您可能希望稍微更改外观和/或行为，以便它自动创建所需大小的插槽。就像我说的，它非常灵活，所以你应该可以做一些工作。

为执行所有这些操作提供的文档非常好。如果您遇到困难，请在此处发布更多问题 - 我已经用过很多次了，也许可以提供帮助。

说实话，我很惊讶它没有出现在你的互联网搜索中。

【讨论】：

我只想要日期选择器。 .如参考文献中所述。链接
你不想要时间段吗？它也会给你。如果您只想要一个日期选择器，请使用 jquery datepicker。但是你必须自己编写时间段的代码。
是的，我想要时间段但不是完整的日历，它应该在用户选择示例中给出的日期后弹出。检查此链接getbooked.io
那么将两者结合起来 - fullcalendar 和 jQuery datepicker - 可能是一个不错的选择。 fullcalendar 可以限制为一次只显示一天，您可以计算出如何在其中呈现单独的可选时间段。
欣赏你的想法，但可能像我给你的例子一样？

【解决方案4】：

您可以将jQuery plugin Tooltipster 的mouseover 和click 处理程序组合起来创建行。检查this sample code :)

您可以加载月份的信息并在月份更改时重复，或者您可以像我在代码中所做的那样即时加载。

【讨论】：

【解决方案5】：

试试jQuery Week Calendar

它的全功能开源插件。它建立在 jquery 和 jquery ui 之上，并受到其他在线每周日历（如 google 日历）的启发。根据您描述的要求，您可以从服务器端更新数据库以及插件中的一些 javascript 更改。这是简单的演示Demo。 Here is more demos that can help you

【讨论】：

不行，不能用这个。