Question

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

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

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

以下是如何复制：

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日

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

Answer 1

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

试试这个......

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

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

1 个答案: