带有时隙选择的jQuery日历
带有时隙选择的jQuery日历
提问于 2016-08-17 11:18:50
我想在PHP中创建一个预约功能。我希望有一个日历，用户可以在其中选择日期，作为回报，日历显示要选择的时隙。
时隙是静态的，将来可能是动态的。
您可以在下面的链接上查看示例。
在互联网上搜索这样的插件，但找不到。(我需要一个免费插件)。
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-08-30 07:54:21
请检查一下这个http://jsfiddle.net/Xx4GS/258/
想法正在改变，我们正在创建新的html元素，并将其附加到datepicker中。你需要根据你的需要修改设计。在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>Stack Overflow用户
发布于 2016-09-01 06:23:40
$('.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方法。
Stack Overflow用户
发布于 2016-08-17 12:34:22
试试FullCalendar：http://fullcalendar.io/
这是一个功能齐全，免费，开源的Javascript日历插件。它非常灵活，可以做你描述的所有事情。您的工作是处理您想要的事件(例如，用户选择一个时隙)，并将其连接到服务器端数据。您可能需要稍微更改外观和/或行为，以便它自动创建所需大小的插槽。就像我说的，它是非常灵活的，所以通过一些工作，你应该能够做到这一点。
为完成所有这些提供的文档非常好。如果你被卡住了，请在这里贴更多的问题--我经常用它，也许能帮上忙。
我很惊讶它没有出现在你的互联网搜索中，诚实地说。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38995183
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号