php - jQuery Datepicker 在每个月的前 10 天不显示事件
问题描述
jquery datepicker 有问题。一切都按预期工作，但每个月前 10 天的事件没有出现。即使将那些日子的日期加载到脚本中，类也不会应用。
https://i.imgur.com/a5fdYkZ.png
https://i.imgur.com/CfbAvEF.png
我尝试了多种代码，包括设置 minDate 和 maxDate ，但没有一个有效。
var dates = [['2019-09-01', 'ui-highlight1'],['2019-09-02', 'ui-highlight1'],['2019-09-03', 'ui-highlight1'],['2019-09-04', 'ui-highlight1'],['2019-09-05', 'ui-highlight1'],['2019-09-06', 'ui-highlight1'],['2019-09-07', 'ui-highlight1'],['2019-09-08', 'ui-highlight1'],['2019-09-09', 'ui-highlight1'],['2019-09-10', 'ui-highlight1'],['2019-09-11', 'ui-highlight1'],['2019-09-12', 'ui-highlight1'],['2019-09-13', 'ui-highlight1'],['2019-09-14', 'ui-highlight1'],['2019-09-15', 'ui-highlight1'],['2019-09-16', 'ui-highlight1'],['2019-09-17', 'ui-highlight1'],['2019-09-18', 'ui-highlight1'],['2019-09-19', 'ui-highlight1'],['2019-09-20', 'ui-highlight1'],['2019-09-21', 'ui-highlight1'],['2019-09-22', 'ui-highlight1'],['2019-09-23', 'ui-highlight1'],['2019-09-24', 'ui-highlight1'],['2019-09-25', 'ui-highlight1'],['2019-09-26', 'ui-highlight1'],['2019-09-27', 'ui-highlight1'],['2019-09-28', 'ui-highlight1'],['2019-09-29', 'ui-highlight1'],['2019-09-30', 'ui-highlight1'],['2019-10-01', 'ui-highlight10'],['2019-10-02', 'ui-highlight10'],['2019-10-03', 'ui-highlight10'],['2019-10-04', 'ui-highlight10'],['2019-10-05', 'ui-highlight10'],['2019-10-06', 'ui-highlight10'],['2019-10-07', 'ui-highlight10'],['2019-10-08', 'ui-highlight10'],['2019-10-09', 'ui-highlight10'],['2019-10-10', 'ui-highlight10'],['2019-10-11', 'ui-highlight10'],['2019-10-12', 'ui-highlight10'],['2019-10-13', 'ui-highlight10'],['2019-10-14', 'ui-highlight10'],['2019-10-15', 'ui-highlight10'],['2019-10-16', 'ui-highlight10'],['2019-10-17', 'ui-highlight10'],['2019-10-18', 'ui-highlight10'],['2019-10-19', 'ui-highlight10'],['2019-10-20', 'ui-highlight10'],['2019-10-21', 'ui-highlight10'],['2019-10-22', 'ui-highlight10'],['2019-10-23', 'ui-highlight10'],['2019-10-24', 'ui-highlight10'],['2019-10-25', 'ui-highlight10'],['2019-10-26', 'ui-highlight10'],['2019-10-27', 'ui-highlight10'],['2019-10-28', 'ui-highlight10'],['2019-10-29', 'ui-highlight10'],['2019-10-30', 'ui-highlight10'],['2019-10-31', 'ui-highlight10'],['2019-11-01', 'ui-highlight3'],['2019-11-02', 'ui-highlight3'],['2019-11-03', 'ui-highlight3'],['2019-11-04', 'ui-highlight3'],['2019-11-05', 'ui-highlight3'],['2019-11-06', 'ui-highlight3'],['2019-11-07', 'ui-highlight3'],['2019-11-08', 'ui-highlight3'],['2019-11-09', 'ui-highlight3'],['2019-11-10', 'ui-highlight3'],['2019-11-11', 'ui-highlight3'],['2019-11-12', 'ui-highlight3'],['2019-11-13', 'ui-highlight3'],['2019-11-14', 'ui-highlight3'],['2019-11-15', 'ui-highlight3'],['2019-11-16', 'ui-highlight3'],['2019-11-17', 'ui-highlight3'],['2019-11-18', 'ui-highlight3'],['2019-11-19', 'ui-highlight3'],['2019-11-20', 'ui-highlight3'],['2019-11-21', 'ui-highlight3'],['2019-11-22', 'ui-highlight3'],['2019-11-23', 'ui-highlight3'],['2019-11-24', 'ui-highlight3'],['2019-11-25', 'ui-highlight3'],['2019-11-26', 'ui-highlight3'],['2019-11-27', 'ui-highlight3'],['2019-11-28', 'ui-highlight3'],['2019-11-29', 'ui-highlight3'],['2019-11-30', 'ui-highlight3'],['2019-12-01', 'ui-highlight5'],['2019-12-02', 'ui-highlight5'],['2019-12-03', 'ui-highlight5'],['2019-12-04', 'ui-highlight5'],['2019-12-05', 'ui-highlight5'],['2019-12-06', 'ui-highlight5'],['2019-12-07', 'ui-highlight5'],['2019-12-08', 'ui-highlight5'],['2019-12-09', 'ui-highlight5'],['2019-12-10', 'ui-highlight5'],['2019-12-11', 'ui-highlight5'],['2019-12-12', 'ui-highlight5'],['2019-12-13', 'ui-highlight5'],['2019-12-14', 'ui-highlight5'],['2019-12-15', 'ui-highlight5'],['2019-12-16', 'ui-highlight5'],['2019-12-17', 'ui-highlight5'],['2019-12-18', 'ui-highlight5'],['2019-12-19', 'ui-highlight5'],['2019-12-20', 'ui-highlight5'],['2019-12-21', 'ui-highlight5'],['2019-12-22', 'ui-highlight5'],['2019-12-23', 'ui-highlight5'],['2019-12-24', 'ui-highlight5'],['2019-12-25', 'ui-highlight5'],['2019-12-26', 'ui-highlight5'],['2019-12-27', 'ui-highlight5'],['2019-12-28', 'ui-highlight5'],['2019-12-29', 'ui-highlight5'],['2019-12-30', 'ui-highlight5'],['2019-12-31', 'ui-highlight5'],['2020-01-01', 'ui-highlight9'],['2020-01-02', 'ui-highlight9'],['2020-01-03', 'ui-highlight9'],['2020-01-04', 'ui-highlight9'],['2020-01-05', 'ui-highlight9'],['2020-01-06', 'ui-highlight9'],['2020-01-07', 'ui-highlight9'],['2020-01-08', 'ui-highlight9'],['2020-01-09', 'ui-highlight9'],['2020-01-10', 'ui-highlight9'],['2020-01-11', 'ui-highlight9'],['2020-01-12', 'ui-highlight9'],['2020-01-13', 'ui-highlight9'],['2020-01-14', 'ui-highlight9'],['2020-01-15', 'ui-highlight9'],['2020-01-16', 'ui-highlight9'],['2020-01-17', 'ui-highlight9'],['2020-01-18', 'ui-highlight9'],['2020-01-19', 'ui-highlight9'],['2020-01-20', 'ui-highlight9'],['2020-01-21', 'ui-highlight9'],['2020-01-22', 'ui-highlight9'],['2020-01-23', 'ui-highlight9'],['2020-01-24', 'ui-highlight9'],['2020-01-25', 'ui-highlight9'],['2020-01-26', 'ui-highlight9'],['2020-01-27', 'ui-highlight9'],['2020-01-28', 'ui-highlight9'],['2020-01-29', 'ui-highlight9'],['2020-01-30', 'ui-highlight9'],['2020-01-31', 'ui-highlight9'],];
var ids = ['9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9','9',];
jQuery(function(){
jQuery('#datepicker').datepicker({
changeMonth : true,
changeYear : true,
beforeShowDay : function SetDayStyle(date) {
var maxDate = new Date(new Date().getFullYear() - 16, 11, 31);
var enabled = true;
var cssClass = "";
var toolTip = "";
var day = date.getDate();
var month = date.getMonth() + 1; //0 - 11
var year = date.getFullYear();
var compare = year + "-" + month + "-" + day;
for (var i = 0; i < dates.length; i++) {
//var toolTip = dates[i].indexOf(compare) + " " + compare
if (dates[i].indexOf(compare) >= 0) cssClass = dates[i][1];
}
return new Array(enabled, cssClass, toolTip);
}
});
$("#datepicker").datepicker("setDate",'');
$("#datepicker")
.datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(dateText) {
$(this).change();
}
})
.change(function() {
window.location.href = "page.php?op=stocktake&cmd=stock_slist&sid=&sdate=" + this.value;
});
})
</script>```
Any ideas what am I doing wrong here?
[1]: https://i.stack.imgur.com/ZnFVi.png
解决方案
如果添加一些基本调试：
console.log(compare, enabled, cssClass, toolTip)
您会看到您compare的日期与日期数组中的日期格式不匹配：
"2019-11-1" != "2019-11-02"
var dates = [
['2019-10-21', 'ui-highlight10'],
['2019-10-22', 'ui-highlight10'],
['2019-10-23', 'ui-highlight10'],
['2019-10-24', 'ui-highlight10'],
['2019-10-25', 'ui-highlight10'],
['2019-10-26', 'ui-highlight10'],
['2019-10-27', 'ui-highlight10'],
['2019-10-28', 'ui-highlight10'],
['2019-10-29', 'ui-highlight10'],
['2019-10-30', 'ui-highlight10'],
['2019-10-31', 'ui-highlight10'],
['2019-11-01', 'ui-highlight3'],
['2019-11-02', 'ui-highlight3'],
['2019-11-03', 'ui-highlight3'],
['2019-11-04', 'ui-highlight3'],
['2019-11-05', 'ui-highlight3'],
['2019-11-06', 'ui-highlight3'],
['2019-11-07', 'ui-highlight3'],
['2019-11-08', 'ui-highlight3'],
['2019-11-09', 'ui-highlight3'],
['2019-11-10', 'ui-highlight3'],
['2019-11-11', 'ui-highlight3'],
['2019-11-12', 'ui-highlight3'],
['2019-11-13', 'ui-highlight3'],
['2019-11-14', 'ui-highlight3'],
['2019-11-15', 'ui-highlight3'],
['2019-11-16', 'ui-highlight3'],
['2019-11-17', 'ui-highlight3'],
['2019-11-18', 'ui-highlight3'],
['2019-11-19', 'ui-highlight3'],
['2019-11-20', 'ui-highlight3'],
['2019-11-21', 'ui-highlight3'],
['2019-11-22', 'ui-highlight3'],
['2019-11-23', 'ui-highlight3'],
['2019-11-24', 'ui-highlight3'],
['2019-11-25', 'ui-highlight3'],
['2019-11-26', 'ui-highlight3'],
['2019-11-27', 'ui-highlight3'],
['2019-11-28', 'ui-highlight3'],
['2019-11-29', 'ui-highlight3'],
['2019-11-30', 'ui-highlight3'],
['2019-12-01', 'ui-highlight5'],
['2019-12-02', 'ui-highlight5'],
['2019-12-03', 'ui-highlight5'],
['2019-12-04', 'ui-highlight5'],
['2019-12-05', 'ui-highlight5'],
['2019-12-06', 'ui-highlight5'],
['2019-12-07', 'ui-highlight5'],
['2019-12-08', 'ui-highlight5'],
['2019-12-09', 'ui-highlight5'],
['2019-12-10', 'ui-highlight5'],
['2019-12-11', 'ui-highlight5'],
['2019-12-12', 'ui-highlight5'],
['2019-12-13', 'ui-highlight5'],
['2019-12-14', 'ui-highlight5'],
['2019-12-15', 'ui-highlight5'],
['2019-12-16', 'ui-highlight5'],
['2019-12-17', 'ui-highlight5'],
['2019-12-18', 'ui-highlight5'],
['2019-12-19', 'ui-highlight5'],
['2019-12-20', 'ui-highlight5'],
['2019-12-21', 'ui-highlight5'],
['2019-12-22', 'ui-highlight5'],
['2019-12-23', 'ui-highlight5'],
['2019-12-24', 'ui-highlight5'],
['2019-12-25', 'ui-highlight5'],
['2019-12-26', 'ui-highlight5'],
['2019-12-27', 'ui-highlight5'],
['2019-12-28', 'ui-highlight5'],
['2019-12-29', 'ui-highlight5'],
['2019-12-30', 'ui-highlight5'],
['2019-12-31', 'ui-highlight5'],
];
jQuery(function() {
jQuery('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
beforeShowDay: function SetDayStyle(date) {
var maxDate = new Date(new Date().getFullYear() - 16, 11, 31);
var enabled = true;
var cssClass = "";
var toolTip = "";
var day = date.getDate();
var month = date.getMonth() + 1; //0 - 11
var year = date.getFullYear();
var compare = year + "-" + month + "-" + day;
for (var i = 0; i < dates.length; i++) {
//var toolTip = dates[i].indexOf(compare) + " " + compare
if (dates[i].indexOf(compare) >= 0) cssClass = dates[i][1];
}
console.log(compare, enabled, cssClass, toolTip)
return new Array(enabled, cssClass, toolTip);
}
});
$("#datepicker").datepicker("setDate", '');
$("#datepicker")
.datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(dateText) {
$(this).change();
}
})
.change(function() {
console.log(this.value);
//window.location.href = "page.php?op=stocktake&cmd=stock_slist&sid=&sdate=" + this.value;
});
}).ui-highlight3
{
color:red;
}<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<input type='date' id='datepicker'>您需要格式化日期以使它们匹配，或者作为日期进行比较：
var compare = year + "-" + ("0"+month).slice(-2) + "-" + ("0"+day).slice(-2);
var dates = [
['2019-10-21', 'ui-highlight10'],
['2019-10-22', 'ui-highlight10'],
['2019-10-23', 'ui-highlight10'],
['2019-10-24', 'ui-highlight10'],
['2019-10-25', 'ui-highlight10'],
['2019-10-26', 'ui-highlight10'],
['2019-10-27', 'ui-highlight10'],
['2019-10-28', 'ui-highlight10'],
['2019-10-29', 'ui-highlight10'],
['2019-10-30', 'ui-highlight10'],
['2019-10-31', 'ui-highlight10'],
['2019-11-01', 'ui-highlight3'],
['2019-11-02', 'ui-highlight3'],
['2019-11-03', 'ui-highlight3'],
['2019-11-04', 'ui-highlight3'],
['2019-11-05', 'ui-highlight3'],
['2019-11-06', 'ui-highlight3'],
['2019-11-07', 'ui-highlight3'],
['2019-11-08', 'ui-highlight3'],
['2019-11-09', 'ui-highlight3'],
['2019-11-10', 'ui-highlight3'],
['2019-11-11', 'ui-highlight3'],
['2019-11-12', 'ui-highlight3'],
['2019-11-13', 'ui-highlight3'],
['2019-11-14', 'ui-highlight3'],
['2019-11-15', 'ui-highlight3'],
['2019-11-16', 'ui-highlight3'],
['2019-11-17', 'ui-highlight3'],
['2019-11-18', 'ui-highlight3'],
['2019-11-19', 'ui-highlight3'],
['2019-11-20', 'ui-highlight3'],
['2019-11-21', 'ui-highlight3'],
['2019-11-22', 'ui-highlight3'],
['2019-11-23', 'ui-highlight3'],
['2019-11-24', 'ui-highlight3'],
['2019-11-25', 'ui-highlight3'],
['2019-11-26', 'ui-highlight3'],
['2019-11-27', 'ui-highlight3'],
['2019-11-28', 'ui-highlight3'],
['2019-11-29', 'ui-highlight3'],
['2019-11-30', 'ui-highlight3'],
['2019-12-01', 'ui-highlight5'],
['2019-12-02', 'ui-highlight5'],
['2019-12-03', 'ui-highlight5'],
['2019-12-04', 'ui-highlight5'],
['2019-12-05', 'ui-highlight5'],
['2019-12-06', 'ui-highlight5'],
['2019-12-07', 'ui-highlight5'],
['2019-12-08', 'ui-highlight5'],
['2019-12-09', 'ui-highlight5'],
['2019-12-10', 'ui-highlight5'],
['2019-12-11', 'ui-highlight5'],
['2019-12-12', 'ui-highlight5'],
['2019-12-13', 'ui-highlight5'],
['2019-12-14', 'ui-highlight5'],
['2019-12-15', 'ui-highlight5'],
['2019-12-16', 'ui-highlight5'],
['2019-12-17', 'ui-highlight5'],
['2019-12-18', 'ui-highlight5'],
['2019-12-19', 'ui-highlight5'],
['2019-12-20', 'ui-highlight5'],
['2019-12-21', 'ui-highlight5'],
['2019-12-22', 'ui-highlight5'],
['2019-12-23', 'ui-highlight5'],
['2019-12-24', 'ui-highlight5'],
['2019-12-25', 'ui-highlight5'],
['2019-12-26', 'ui-highlight5'],
['2019-12-27', 'ui-highlight5'],
['2019-12-28', 'ui-highlight5'],
['2019-12-29', 'ui-highlight5'],
['2019-12-30', 'ui-highlight5'],
['2019-12-31', 'ui-highlight5'],
];
jQuery(function() {
jQuery('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
beforeShowDay: function SetDayStyle(date) {
// never used: var maxDate = new Date(new Date().getFullYear() - 16, 11, 31);
var enabled = true;
var cssClass = "";
var toolTip = "";
var day = date.getDate();
var month = date.getMonth() + 1; //0 - 11
var year = date.getFullYear();
var compare = year + "-" + ("0"+month).slice(-2) + "-" + ("0"+day).slice(-2);
for (var i = 0; i < dates.length; i++) {
//var toolTip = dates[i].indexOf(compare) + " " + compare
if (dates[i].indexOf(compare) >= 0) cssClass = dates[i][1];
}
console.log(compare, enabled, cssClass, toolTip)
return new Array(enabled, cssClass, toolTip);
}
});
$("#datepicker").datepicker("setDate", '');
$("#datepicker")
.datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(dateText) {
$(this).change();
}
})
.change(function() {
console.log(this.value);
//window.location.href = "page.php?op=stocktake&cmd=stock_slist&sid=&sdate=" + this.value;
});
}).ui-highlight3
{
color:red;
}<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<input type='date' id='datepicker'>推荐阅读
- python - 创建 Azure 函数以执行 ETL
- ruby - 如何在我的 show 方法中调用连接表？更新
- django - 如何使用清晰的表单格式化 django-filters？
- apache-spark - 随着表的增长，写入分区的 Hive 表需要更长的时间
- .net - 删除 SQL Server CE
- javascript - 反应缩放平移捏抛出未定义的无法读取属性“limitToWrapper”
- c# - 玩家相对于相机方向的移动 C#
- c - 如何将变量数据传递到 libcurl 帖子正文？
- node.js - npm install 上的依赖错误（React magento）
- python - Base64 编码错误，需要类似字节的对象，而不是“str”