This is a migrated thread and some comments may be shown as answers.

Problem with passing DateTime picker data, to an LocalDateTime Java object

1 Answer 590 Views

Date/Time Pickers

This is a migrated thread and some comments may be shown as answers.

bruno asked on 13 Sep 2018, 11:18 AM

I'm using a kendo date picker in a jsp binded form (using spring + hibernate). When i try tu submitt the form i get this errros: "Field error in object 'doctorVisit' on field 'date': rejected value [9/25/2018 8:00 AM]" and

"Failed to convert property value of type 'java.lang.String' to required type 'java.time.LocalDateTime' for property 'date'". The binded property Is of LocalDateTime and has formmating set to be Just the same as the date picker formmat. Down under is my Jsp from and Kendo script

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

<link href="/Kstyles/kendo.common.min.css" rel="stylesheet" />

<link rel="stylesheet" href="/Kstyles/kendo.common.min.css" />

<link rel="stylesheet" href="/Kstyles/kendo.default.min.css" />

<script src="/Kjs/jquery.min.js"></script>

<script src="/Kjs/kendo.all.min.js"></script>

<title>Appointment</title>

</head>

<body>

<form:form modelAttribute="visit" method="POST" >

${spec}:<form:select path="doctor" multiple="false">

<c:forEach var="doctor" items="${doctors}">

<form:option value="${doctor}" label="${doctor.surname}"/>

</c:forEach>

</form:select>

Date and time:<form:input id="timePicker" path="date" />

Cause: <form:select path="cause" multiple="false">

<c:forEach var="cause" items="${causes}">

<form:option value="${cause}" label="${cause.description}"/>

</c:forEach>

</form:select>

<input type="submit" value="Submit"/>

</form:form>

<script>

(function($) {

var dateTimePicker = kendo.ui.DateTimePicker;

var MyWidget = dateTimePicker.extend({

init: function(element, options) {

dateTimePicker.fn.init.call(this, element, options);

},

startTime: function(startTime) {

var timeViewOptions = this.timeView.options;

timeViewOptions.min = startTime;

this.timeView.setOptions(timeViewOptions);

},

endTime: function(endTime) {

var timeViewOptions = this.timeView.options;

timeViewOptions.max = endTime;

this.timeView.setOptions(timeViewOptions);

},

options: {

name: "CustomDateTimePicker",

interval: 20,

}

});

kendo.ui.plugin(MyWidget);

})(jQuery);

var datePicker = $("#timePicker").kendoCustomDateTimePicker().data("kendoCustomDateTimePicker");

datePicker.startTime("07:00");

datePicker.endTime("20:00");

</script>

</body>

</html>

1 Answer, 1 is accepted

answered on 17 Sep 2018, 02:42 PM

Hi, Bruno,

The Kendo UI DatePicker widget has a value() method which holds the Date object value of the widget:

https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/value

The input itself is a text type so that it can handle all types of formats. Can you share the controller code as well?

Finally, the custom widgets have limited support and I noticed that the code shows a custom widget:

https://docs.telerik.com/kendo-ui/intro/widget-basics/create-custom-kendo-widget#technical-support

The approach which is used to set an hour range is not bulletproof because it is a string and not a date. The expected value should be the same date object as the value of the date picker with a different time. You can achieve the same functionality following the approach in this how-to article:

https://docs.telerik.com/kendo-ui/controls/editors/datetimepicker/how-to/override-hours

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.