问题描述
我正在尝试实现一个jQuery dateticker，但根据以下指南，它的行为不正确：
https://designmodo.com/calendar-jquery-css3/
本指南说，我应该能够使用dayNamesMin字段设置显示星期几的文本：
$('#calendar').datepicker({
inline: true,firstDay: 1,showOtherMonths: true,dayNamesMin: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
});
但这似乎不适用于我。
我这样设置日历的div：
<div class="calendar" id="aug-calendar"></div>
我这样初始化日历：
$('#aug-calendar').datepicker({
showOtherMonths: false,dayNamesMin: ['S','M','T','W','F','S']
});
只要您需要查看它，以下是日历类：
.calendar {
color: white;
font-weight: bold;
}
但这是日历的样子：
有人可以解释为什么dayNamesMin无法正常工作吗？
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,'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>
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）