CODEWITHSUNDEEP
kendo-uikendo-datepicker
Sam
Sam

Reputation: 129

Kendo Datepicker shows wrong format when value is set past max date

I have a pair of Kendo Datepicker fields on a page for Start Date and End Date. The Start Date defaults to today's date and the End Date defaults to today's date a year from now. The user is allowed to pick a date from the Kendo Datepicker calender or enter a date manually.

The Datepicker calendar popup on the End Date field has a 'max' option set so it won't show dates greater than one year from now, but a user can enter a later date manually. If they do so and click Submit on my form, the server-side validation will catch the problem and display the form again with an error.

I want to leave the date the user manually entered in the Datepicker field intact so they can see the source of the problem, but keep the 'max' option in the calendar. But when I set the Datepicker options with a 'max' and a 'value' that's after the max, it shows the value in the wrong format.

Here's how to replicate:

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.

Set the 'value' attribute of the input tag to be a date after the max date and the date will display like this:

Fri Jun 19 2015 00:00:00 GMT-0700 (Pacific Standard Time)

instead of how it should be:

06/15/2015

Is this a Kendo bug or is it broken by design? Or am I goofing up somewhere?

Upvotes: 1

Views: 6142

Answers (1)

gro
gro

Reputation: 755

Yeah, it looks like the control is working fine. The issue is that the control fails fast on testing for max, which means it doesn't apply some other options (eg. format). I'd vote for broken by design.

try this...

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

Upvotes: 2

Related Questions