当值设置为超过最大日期时，Kendo Datepicker 显示错误的格式

Posted 2023-05-07

【中文标题】当值设置为超过最大日期时，Kendo Datepicker 显示错误的格式

【英文标题】：Kendo Datepicker shows wrong format when value is set past max date

【发布时间】：2014-08-09 05:53:03

【问题描述】：

我在开始日期和结束日期的页面上有一对 Kendo Datepicker 字段。开始日期默认为今天的日期，结束日期默认为一年后的今天。允许用户从 Kendo Datepicker 日历中选择日期或手动输入日期。

结束日期字段上的 Datepicker 日历弹出窗口设置了“最大”选项，因此它不会显示超过一年的日期，但用户可以手动输入较晚的日期。如果他们这样做并在我的表单上单击提交，服务器端验证将发现问题并再次显示表单并显示错误。

我想保留用户在 Datepicker 字段中手动输入的日期不变，以便他们可以看到问题的根源，但在日历中保留“最大”选项。但是，当我使用“最大值”和最大值之后的“值”设置 Datepicker 选项时，它会以错误的格式显示值。

复制方法如下：

html：

<!-- Note future date in 'value' attribute. -->
<input id='dateField' style="width: 100%;" type="text" value="20160618">

JS：

var dateField = $("#dateField");

// The DatePicker's value comes from the dateField's 'value' attribute.
var value = moment(dateField.val(), 'YYYYMMDD').toDate(); // moment().toDate() gives a javascript Date object.

// Initialize the date picker options object with some common settings.
datePickerOptions = 
    format: 'MM/dd/yyyy',
    value: value,


// Set the max to be one year from now.
datePickerOptions.max = new Date(moment(new Date()).add('years', 1).toDate());

// Initialize the DatePicker.
dateField.kendoDatePicker(datePickerOptions);

// Here's a workaround I found... After initializing the picker, manually set the value back to the correctly formatted string.
//dateField.val(moment(value).format('MM/DD/YYYY'));

jsFiddle with the above code.

将输入标签的'value'属性设置为最大日期之后的日期，日期将显示如下：

2015 年 6 月 19 日星期五 00:00:00 GMT-0700（太平洋标准时间）

而不是应该如何：

2015 年 6 月 15 日

这是一个剑道错误还是被设计破坏了？还是我在某个地方搞砸了？

【参考方案1】：

是的，看起来控件工作正常。问题是控件在测试最大值时很快失败，这意味着它不应用其他一些选项（例如格式）。我会投票支持设计中断。

试试这个...

datePickerOptions = 
    format: 'MM/dd/yyyy',
    value: moment(value).format('MM/DD/YYYY'),
    max: new Date(moment(new Date()).add('years', 1).toDate())

【讨论】：

这似乎有效。此外，您不需要最大值周围的 new Date()，moment().toDate() 返回一个 JS 日期对象，并在 JSFiddle 中玩耍，看起来它只是所需值的 format()。谢谢。