Kendo DatePicker - 使用下一个/上一个按钮时日期文本消失
Posted
技术标签:
【中文标题】Kendo DatePicker - 使用下一个/上一个按钮时日期文本消失【英文标题】：Kendo DatePicker - Date text disappears when using next/prev buttons 【发布时间】：2021-10-30 05:16:37 【问题描述】：我正在使用 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>【问题讨论】：
【参考方案1】：问题在于更改功能。 当我运行您的代码时，它从 2021 年 8 月 31 日开始。 如果我随后打开日历并选择 2021 年 9 月 2 日，则此行
selectedDate.setDate(datepicker.value().getDate());
将 selectedDate 变量设为 2021 年 8 月 2 日。月份未得到调整。然后，当您使用 prev/next 时，该 selectedDate 变量会递增并应用于选择器，此时它会变为空白，因为它超出了允许的范围。
您的代码需要扩展以考虑月份和年份。
【讨论】：
您对月份设置不正确是对的，但即使我尝试明确设置它，它也是不正确的。查看我对原始帖子的更新。 啊，我刚刚意识到这实际上是正确的，因为月份计数从零开始。所以 8 是 9 月。修好了谢谢你的帮助！！以上是关于Kendo DatePicker - 使用下一个/上一个按钮时日期文本消失的主要内容，如果未能解决你的问题，请参考以下文章
Kendo UI for Angular：Kendo UI Datepicker 禁用输入/仅文本框部分