Hello,
I have a Form with an Ajax POST method. One of the fields is a DateTime and when it is being posted, it uses some kind of long format with a mix of culture... It break the ASP Model and marks it as invalid as it's not recognised as a DateTime.
This is the payload from submiting the form, as you can see, the timezone is in french, while the date is in en-US. The client Kendo culture is also set as en-US.
DateRequete: Tue+Oct+11+2022+00:00:00+GMT-0400+(heure+d’été+de+l’Est)
This is the form submit function:
function onFormRequeteSubmit(ev) { //Fonction pour FormRequuete
ev.preventDefault();
var modelData = ev.model;
$.ajax({
type: 'POST',
url: "/FormHandler/Requete",
beforeSend: function (xhr) {
xhr.setRequestHeader('X-XSRF-TOKEN', getCookie('XSRF-TOKEN'));
},
data: modelData,
dataType: 'json',
success: function (data) {
//removed for clarity
},
error: function (data) {
//removed for clarity
}
})
};
I"ve tried the following before the $.ajax call, and it does post the date in a valid ISO format, but it breaks the post and somehow posts the actual page instead of the ajax url...
modelData.DateRequete.value = modelDate.DateRequete.toJSON();
How can I convert the date to a valid format before posting it and/or why is my client culture not set properly? This is the content of my <head>:
<script src="https://cdn.kendostatic.com/2022.2.510/js/cultures/kendo.culture.en-US.min.js"></script>
<script>
kendo.culture("en-US");
var culture = kendo.culture();
console.log(culture.name); // outputs "en-US"
</script>1 Answer, 1 is accepted
Hello Eric,
I noticed that you have submitted the same query as a support ticket, as I have already answered your question in the ticket, I will post the same here in case someone else has the same question:
I would recommend parsing the DateTime field value to a string by using the toLocaleString() method before the AJAX call as follows:
function onFormRequeteSubmit(ev) { //Fonction pour FormRequuete
ev.preventDefault();
var modelData = ev.model;
modelData.DateRequete = modelData.DateRequete.toLocaleString();
$.ajax({
....
})
};Also, please ensure that the server-side culture is set to "en-US", as well, as is stated in the globalization section in the documentation.
I have prepared a runnable sample that contains a Form with a DateTimePicker editor, which is submitted through an AJAX request. You can review it attached.
Please give this example a try and let me know how the behavior changes at your end.
Regards, Mihaela Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.