1

我在开始日期和结束日期的页面上有一对 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 上面的代码。

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

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

而不是应该如何：

2015 年 6 月 15 日

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

4

1 回答 1

2

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

尝试这个...

datePickerOptions = {
    format: 'MM/dd/yyyy',
    value: moment(value).format('MM/DD/YYYY'),
    max: new Date(moment(new Date()).add('years', 1).toDate())
}
于 2014-06-18T21:38:34.803 回答