【发布时间】：2021-03-06 11:15:19
【问题描述】：
我开始制作一个 JQuery 日历，它是关于选择一个事件的约会，我想禁用当前日期之前的日期。我还想在可用日期中添加#f48024 橙色，以更清楚地表明它们仍然可用。
我用 minDate 试过了，但到目前为止没有用。
我的问题是如何禁用当前日期之前的日期？
编辑：我添加了以下代码使其成为可能，但它复制了日历，我不知道为什么。
$(document).ready(function(){
$("#example-popover-2") .datepicker({
minDate:0,
})
}
)
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.popover
{
left: 5% !important;
top: 120% !important;
}
.btn
{
margin: 1%;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
.popover button{
background: #f48024;
}
.popover button:hover{
background:#fcb67c;
}
.popover button:focus{
background: #052049;
}
.popover button:focus:active{
background: #052049;
}
.arrow {
visibility: hidden;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
border: 1px solid #dad55e;
background: #fffa90;
color: #777620;
}<!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>
<link rel="stylesheet" href="./style.css" />
<script src="app.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>
<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>Available Appointments</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('Available times <strong>'+dateText+'</strong><br>'+html);
$('.date-picker-2').popover('show');
}
});
// I added this part to the code but this duplicates the calendar.
$(document).ready(function(){
$("#example-popover-2") .datepicker({
minDate:0,
})
}
)
</script>
</body>
</html>【问题讨论】：
标签： javascript html jquery datepicker calendar