Datepicker prevents submitting form (days picked are treated as months)

Question

Dear all,

I am stuck with an issue relating to a date picker component in an MVC5 / Net 4.8 application. The issue also relates to another question regarding the display of dates in the date picker component, please refer to this post for details.

The actual date format is fine, however when selecting a date with a weekday of greater than 12 in either of the two date picker components, the input is underlined and I cannot submit the form, meaning the Controller method is not called at all (cf. screenshot in the zip).

Since numbers below twelve are fine, I assume that somehow the days must be treated as months. I would like to add that I am using a European date format, i.e. dd.MM.yyyy. I am also setting the culture in Global.asax.cs as follows:

public class MvcApplication : System.Web.HttpApplication

{

[SomeMoreConfiguration]

protected void Application_BeginRequest(Object sender, EventArgs e)

{

var newCulture = (CultureInfo)Thread.CurrentThread.CurrentCulture.Clone();

newCulture.DateTimeFormat.ShortDatePattern = "dd.MM.yyyy";

newCulture.DateTimeFormat.DateSeparator = ".";

Thread.CurrentThread.CurrentCulture = newCulture;

}

The culture is properly set to German. I also included my Index page for the component mentioned above.

Please do let me know if you require additional informational. Thanks a mil in advance for your help.

Kind regards

Chris

Attachment: datepickerissue_307c2cbe.zip

Sevvandhi Nagulan · Accepted Answer

Hi Chris, 


Greetings from Syncfusion support. 


We checked your query. We made sample with the provided code snippet and we cannot reproduce the mentioned issue. Here we have attached the ensured sample. Kindly check with the attached sample and provide the issue reproducing sample that will help us to further validate the issue and provide you with a better solution from our end. 


Please find the sample below. 


Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePickerGlobalization-1201175457 

Also, we suggest you ensure whether or CLDR data is  properly loaded in your application. 

Please find the UG documentation for Globalization. 


UG Link: https://ej2.syncfusion.com/aspnetcore/documentation/datepicker/globalization/ 


Please check the above sample and get back to us if you need further assistance. 


Regards, 
Sevvandhi N

CR · Answer

Dear Sevvandhi,Thanks a mil for getting back regarding my query. I appreciate the sample application you kindly provided. The sample is working fine and I've been using it for comparison. However, I am still not able to submit the form in my application. I swapped the localisation script for the one you used in the sample application, I am now using the same script. I also analysed what was happening in the form when pressing the submit button using Chrome developer tools. I took the liberty of (roughly) translating the error message in data-val-date into English, but as far as I can tell, this seems to be a validation error:<input data-val="true" data-val-date="The field "Anfangsdatum" must be a date." ejs-for="true" id="StartDate" name="StartDate" type="text" value="" class="e-control e-datepicker e-lib e-input e-keyboard input-validation-error" aria-live="assertive" aria-atomic="true" aria-haspopup="true" aria-activedescendant="null" aria-owns="StartDate_options" aria-expanded="false" role="combobox" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" aria-invalid="false" aria-disabled="false" tabindex="0" placeholder="Wählen Sie ein Datum" aria-placeholder="Wählen Sie ein Datum" aria-describedby="StartDate-error">Are there any places in the application in which I need to set / change the default date format pattern or make changes elsewhere to resolve the issue? Kind regardsChrisUpdate:Just wanted to some details: If I add @HtmlValidationFor(...), I get the same error as outlined in the html snippet above. If I use a different date format, e.g 'MM/dd/yyyy' no validation errors occur. However, the dates are passed in the wrong format selected. I was wondering about the differences in the selected culture between your sample application and my application.

Sevvandhi Nagulan · Answer

Hi Chris,

On validating the reported issue, we suspect that you have added jQuery for client side validation in the application. If it so, we suggest you to add the below code in the script to get rid of the reported issue.

$(document).ready(function () {

$("input[data-val-date]").removeAttr("data-val-date");

});

</script>

If the above suggestion does not help you, please modify the provided sample to replicate the issue in our end. It would be helpful to validate the issue further in our end.

Regards,

Sevvandhi N

CR · Answer

Dear Sevvandhi,

Thanks a mil for your reply and your suggestions. I've tried replicating the issue using the sample you kindly provided. However, I was unable to identify the the root cause by comparing the sample and my application. Since I was a bit short on time, I used a JQuery date picker instead, passing the dates selected as a string and parsing said date strings into a "proper" dates. Would that also work for the Syncfusion date picker component (did not see a similar approach in the documentation)?

I do not think I'll have time to investigate the issue further, but thank you very much indeed for support regarding the matter.

Kind regards

Chris

Berly Christopher · Answer

Hi Chris, 
  
Sorry for the inconvenience caused. 
  
Please share the code details for passing the date string to date value in the jQuery DatePicker component. Based on the details, we will check the same case with our Syncfusion DatePicker component and provide the details further.  
  
Also, we can pass the string value as the date object with help of parseDate method as mentioned in the below code example and assigned to the DatePicker component.   
  





DatePickerInstance.globalize.parseDate(date value in string, {format: required format”});  
 
  
For ex: 





dateObj.ej2_instances[0].globalize.parseDate("21/1/2020",{format:"d/M/yyyy"});  
 
  
Regards, 
Berly B.C

CR · Answer

Dear Berly B.C,Thanks a mil for your code snippet for passing  the string value as the date object to the component. I'll try it out, but for the time being, I think I am going to stick with my current implementation. As requested, I am sending you some snippets demonstrating how I used JQuery datepicker. Unfortunately, I was unable to create a comprehensive example that was small enough for the upload. I hope the files attached provide enough details for you. In case you wonder about the mapping: I am just converting the string dates into DateTime dates, e.g.var dateFromString = DateTime                    .ParseExact(                        date, datePattern,                        CultureInfo.InvariantCulture,                        DateTimeStyles.None);                return dateFromString;Please do get in touch if you require additional information.Kind regardsChrisAttachment: JQueryDatePickerComponents_27552521.zip

Sevvandhi Nagulan · Answer

Hi Chris, 


Thanks for the sharing the requested details. 


We deeply regret for the inconvenience caused. We prepared the sample with provided code example. We could not replicate the issue in our end. For your reference we attached the sample below. 


Please find the sample below. 


Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker-2023962322 


Please check the sample and modify the above sample to validate the issue further in our end. 


Regards, 
Sevvandhi N