javascript - Kendo DatePicker - 使用下一个/上一个按钮时日期文本消失
问题描述
我正在使用 Kendo DatePicker 小部件和一些下一个/上一个按钮来切换日期。我还在当前日期周围设置了一个两周的窗口。当您在窗口的任一端选择日期时,会相应地禁用下一个/上一个按钮。错误是 - 当从日历中选择未来日期,然后使用下一个/上一个按钮之一时,日期文本会消失。在第一次出现错误后,有时也会在以前的日期发生。下面是我的代码的一个工作示例。任何帮助表示赞赏!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<button id="btnPrevDate" type="button">prev</button>
<div class="demo-section k-content d-inline-block">
<input id="scheduleDatePicker" title="datepicker" class="w-100" />
</div>
<button id="btnNextDate" type="button">next</button>
<script>
$(document).ready(function(){
var currentDate = new Date();
var selectedDate = new Date();
var startDate = new Date();
var endDate = new Date();
selectedDate.setDate(currentDate.getDate());
startDate.setDate(currentDate.getDate() - 7);
endDate.setDate(currentDate.getDate() + 7);
$("#scheduleDatePicker").kendoDatePicker({
value: selectedDate,
min: startDate,
max: endDate,
change: function (e) {
var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');
selectedDate.setDate(datepicker.value().getDate());
if (selectedDate.getDate() == endDate.getDate()) {
$('#btnNextDate').prop('disabled', true);
} else if (selectedDate.getDate() == startDate.getDate()) {
$('#btnPrevDate').prop('disabled', true);
}
if (selectedDate.getDate() != endDate.getDate()) {
$('#btnNextDate').prop('disabled', false);
}
if (selectedDate.getDate() != startDate.getDate()) {
$('#btnPrevDate').prop('disabled', false);
}
}
});
$('#btnPrevDate').on('click', function () {
var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');
selectedDate.setDate(selectedDate.getDate() - 1);
datepicker.value(selectedDate);
$('#btnNextDate').prop('disabled', false);
if (selectedDate.getDate() == startDate.getDate()) {
$(this).prop('disabled', true);
}
});
$('#btnNextDate').on('click', function () {
var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');
selectedDate.setDate(selectedDate.getDate() + 1);
datepicker.value(selectedDate);
$('#btnPrevDate').prop('disabled', false);
if (selectedDate.getDate() == endDate.getDate()) {
$(this).prop('disabled', true);
}
});
});
</script>
</body>
</html>
解决方案
问题在于更改功能。当我运行您的代码时,它从 2021 年 8 月 31 日开始。如果我随后打开日历并选择 2021 年 9 月 2 日,则此行
selectedDate.setDate(datepicker.value().getDate());
使 selectedDate 变量为 2021 年 8 月 2 日。月份没有得到调整。然后,当您使用 prev/next 时,该 selectedDate 变量会递增并应用于选择器,此时它会变为空白,因为它超出了允许的范围。
您的代码需要扩展以考虑月份和年份。
推荐阅读
- android - 我在 firebase 实时数据库上有 9000+ 的大型数据节点,我想删除除少数节点之外的所有节点
- python - 如何在python中将ab转换为['a']['b']
- python - 输入和结果不附加到字典?
- php - 错误 2002 连接在 PHP 连接到 MAMP 上运行的 MySQL 时被拒绝
- python-2.7 - 从“显示端口通道摘要”构建的python字典
- ios - BezierPath clipShape 问题
- isabelle - 在没有局部假设的情况下在 Isar 中证明定理
- javascript - Qualtrics:如何记录显示给参与者的动态文本版本?
- python - 根据索引拆分 train_test_split 的数据帧
- discord.js - Discord.js 如何让机器人将用户发送的内容插入 url?