jquery - 为什么设置为 false 时 jquery 的 datepicker 上的 showOtherMonths 不会关闭
问题描述
我正在尝试实现一个 jquery dateticker,但它的行为不符合文档。
根据此处的文档:
https://jqueryui.com/datepicker/#other-months
...我应该能够将 showOtherMonths 设置为 false 并且看不到属于其他月份的日期。但这不起作用。
我为日历设置了 div,如下所示:
<div class="calendar" id="aug-calendar"></div>
我像这样初始化日历:
$('#aug-calendar').datepicker({
showOtherMonths: false
});
以防万一您需要查看它,这是日历类:
.calendar {
color: white;
font-weight: bold;
}
但这是日历的样子:
其他月份的日期仍然存在:
更新:这是实时页面的链接:
http://hollandandbarnes.azurewebsites.net/entertainment/upcoming-events/
...以及页面的完整代码:
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "Master.cshtml";
}
@* the fun starts here *@
<div>
<div class="logo-and-title-container">
<div class="logo-container">
<img src="~/assets/img/logo for upcoming events - 1893x293.png" alt="Holland & Barnes.com" width="500px" />
</div>
<div class="upcoming-events-title-container">
<span class="upcoming-events-title">Upcoming Events Search</span>
</div>
</div>
<div class="search-container">
<div class="search-textbox-outer-container">
<div class="search-textbox-inner-container">
<input type="text" class="search-textbox">
</div>
</div>
<div class="search-category-checkbox-group-container">
<div class="search-category-checkbox-row">
<div class="search-category-checkbox-container">
<input type="checkbox"> Annual Festival
</div>
<div class="search-category-checkbox-container">
<input type="checkbox"> Concerts
</div>
<div class="search-category-checkbox-container">
<input type="checkbox"> Conventions
</div>
<div class="search-category-checkbox-container">
<input type="checkbox"> Cultural Events
</div>
<div class="search-category-checkbox-container">
<input type="checkbox"> Speakers
</div>
<div class="search-category-checkbox-container">
<input type="checkbox"> Education
</div>
</div>
<div class="search-category-checkbox-row">
<div class="search-category-checkbox-container">
<input type="checkbox"> Sporting Events
</div>
<div class="search-category-checkbox-container">
<input type="checkbox"> Trade Shows
</div>
<div class="search-category-checkbox-container">
<input type="checkbox"> Live Theatre
</div>
<div class="search-category-checkbox-container">
<input type="checkbox"> Fashion
</div>
<div class="search-category-checkbox-container">
<input type="checkbox"> Business
</div>
<div class="search-category-checkbox-container">
<input type="checkbox"> Arts
</div>
</div>
</div>
</div>
<div class="main-content-container">
<div class="calendar-container">
<div class="calendar" id="aug-calendar"></div>
<div class="calendar" id="sep-calendar"></div>
<div class="calendar" id="oct-calendar"></div>
<div class="calendar" id="nov-calendar"></div>
</div>
<div class="buttons-and-events-container">
</div>
</div>
</div>
@section Styles {
<style>
.search-category-checkbox-container {
width: 150px;
}
.search-category-checkbox-row {
width: 90%;
height: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 5px 0;
}
.search-category-checkbox-group-container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20px;
color: black;
font-family: Futura;
font-size: 20px;
}
.search-textbox {
width: 95%;
border: none;
height: 46px;
font-size: 25px;
padding-left: 10px;
}
.search-textbox-inner-container {
border: black solid 2px;
width: 100%;
margin: 30px 40px;
height: 50px;
background: url('/assets/img/search icon.png') no-repeat;
background-position: right;
background-origin: content-box;
padding-right: 5px;
box-shadow: 8px 8px 10px #aaaaaa;
}
.search-textbox-outer-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.search-container {
background-color: white;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.upcoming-events-title {
font-size: 50px;
color: white;
}
.upcoming-events-title-container {
width: 60%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo-container {
width: 40%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-width: 550px;
}
.logo-and-title-container {
background-color: rgb(35,31,32);
width: 100%;
height: 200px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.calendar {
color: white;
font-weight: bold;
padding: 10px;
}
.ui-datepicker {
font-family: Futura;
}
/*.next, .prev {
display: none;
}*/
/*
.table-condensed thead tr:first-child .datepicker-switch {
width: 100% !important;
margin: auto !important;
background-color: red;
}*/
.main-content-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.calendar-container {
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgb(65,64,66);
width: 300px;
align-items: center;
padding: 10px 0;
}
.buttons-and-events-container {
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgb(230,231,232);
flex-grow: 1;
}
@@font-face {
font-family: "Futura";
src: url("assets/fonts/Futura.ttf") format("TrueType"),
}
</style>
}
@section Scripts {
<script>
$(function () {
for (let month of ['aug', 'sep', 'oct', 'nov']) {
$('#' + month + '-calendar').datepicker({
showOtherMonths: false,
dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
});
}
//$('#aug-calendar thead tr:first-child').addClass('green-background');
//$('#aug-calendar thead tr:first-child').css('width', '100%');
//$('#aug-calendar thead tr:first-child').html('<th class="red-background" style="width: 100%;">August</th>');
});
</script>
}
解决方案
推荐阅读
- c++ - 有没有更好的方法来命名管道`cv::mat`变量
- c# - 树数据结构加载巨大的数据表 800K 行 - 30K+ 分支
- git - GitHub 发现了漏洞(推送到 github 时) - 但是 /network/alerts 不存在?
- neural-network - TPU 训练在训练过程中冻结
- android - 如何使用 Twilio api 从 Android 应用发送短信
- c# - 为什么 Azure Function v2 无法绑定到 CloudTable?
- rest - 尝试使用资源所有者密码授予将身份服务器授予的访问令牌共享给客户端应用程序
- javascript - Javascript setTimeout 可靠性和 DOM 渲染
- gnuplot - 在 GNUPLOT mutliplot 选项中,X 轴的标签未绘制用于第二个绘图
- reactjs - 有多个 useEffect 时跳过第一个 useEffect