DatePickerFor: How to properly set ID to apply globalisation (monts and date format)

[CR]

Dear All, 

I am currently stuck with two date pickers in an MVC (NET 4.8) form. I added two date pickers, one to get a start date, the other one to get an end date. Both dates can be used for querying a database. While creating the form I saw the option for using EJS().DatePickerFor(m => m.StartDate) to directly access a model. 

So far this has been working great, however, I am facing the following issues:

1. I would like both components to display translations for Today and for the months as well. 

2. Moreover, having selected the date, the latter is being display in the following format : /M/d/yyyy. How can change I change the display format to dd.MM.yyyy? 

Please do take into account the following snippet for the form mentioned above:

@using (Html.BeginForm("CheckImports", "ImportCheck", FormMethod.Post, new { id = "dateChecker" }))

    {

        <div class="form-group">

            

                @Html.LabelFor(p => p.StartDate)

                @Html.EJS().DatePickerFor(m => m.StartDate).Width("255px").Render()

            

            

                @Html.LabelFor(p => p.EndDate)

                @Html.EJS().DatePickerFor(m => m.EndDate).Width("255px").Render()

            

        </div>

        @Html.AntiForgeryToken()

        [...]

         <btn>...

    }

Thanks a mil in advance for your help

Kind regards

Chris

[Ponmani Murugaiyan]

Hi CR, 

Thanks for contacting Syncfusion support. 

By default, DatePicker date format, week and month names are specific to the American English culture. You can change the desired culture as provided in the below documentation. We have prepared sample for your reference, please find below. Install the CLDR-Data package by using the command (npm install cldr-data --save). Once the package installed, you can find the culture specific JSON data under the location \node_modules\cldr-data. In the below sample refer the culture files (cldr-data folder) directly in the Content folder. 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/datepicker/globalization/  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication138782425  

Kindly check with the above sample to meet your requirement. Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[CR]

Thanks a mil for your reply and for providing a sample application. Unfortunately I am having trouble with said sample application. 

When entering

npm install cldr-data --save

into the console, the following error message was displayed (note that I removed the user name in the snippet):

Received 33923K total.

Unpacking it into `./`

npm : npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\..\Downloads\WebApplication138782425\WebApplication1\package.json'

At line:1 char:1

+ npm install cldr-data --save

+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    + CategoryInfo          : NotSpecified: (npm WARN saveEr...1\package.json':String) [], RemoteException

    + FullyQualifiedErrorId : NativeCommandError

 

npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\...\Downloads\WebApplication138782425\WebApplication1\package.json'

npm WARN WebApplication1 No description

npm WARN WebApplication1 No repository field.

npm WARN WebApplication1 No README data

npm WARN WebApplication1 No license field.

+ [email protected]

updated 1 package and audited 121 packages in 62.794s

found 4 low severity vulnerabilities

  run `npm audit fix` to fix them, or `npm audit` for details

  

When running your application, the controls are note localised with some errors being displayed in browser console, cf. screenshot below

I am not quite what the issues are. I would be delighted if could provide further assistance regarding this matter. 

Thanks a mil in advance, looking forward to your reply.

Kind regards

Chris

[Vignesh Srinivasan]

Hi Chris, 

 

The reported error is occurs because of the  culture file is not in the mentioned path. After installing the culture file using the command (npm install cldr-data --save). You can find the culture file under the location \node_modules\cldr-data, refer the culture files (cldr-data folder) directly in the Content folder to get rid of the reported issue. 

 

Screenshot: 

 

 

 

Kindly follow the above steps to resolve the reported issue. Please get back to us if you need further assistance. 

 

Regards, 

 

Vignesh Srinivasan. 

[CR]

Dear Vignesh, 

Thanks a mil for getting back to me regarding my query. The problem was - as you also quite rightly suggested - that cldr-data could not be found under the path that was indicated. In my case the corresponding file(s) were at '/../../Scripts/cldr-data/supplemental/. 

Despite the fact that months, days and so on seem to be properly localised at first glance, there is still a small design issue. Having selected the current date, leading zeroes are missing if either day or month are single digits, e.g.

I would like the dates being displayed in the following format 03.01.2021. Where would I make the required adjustment? 

Thanks in advance for your reply.

Kind regards 

Chris

[Vignesh Srinivasan]

Hi Chris, 

 

We can able to change the format of the DatePicker component using the property Format. Please find the code example below. 

 

Code snippet: 

 

<div class="form-group"> 

 

    @Html.LabelFor(p => p.StartDate) 

    @Html.EJS().DatePickerFor(m => m.StartDate).Format("dd-MM-yy").Width("255px").Render() 

 

    @Html.LabelFor(p => p.EndDate) 

    @Html.EJS().DatePickerFor(m => m.EndDate).Format("dd-MM-yy").Width("255px").Render() 

 

</div> 

    @Html.AntiForgeryToken() 

    <button type="submit">Submit</button> 

} 

 

Screenshot: 

 

 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Vignesh Srinivasan. 

[CR]

Dear Vignesh , 

Thanks a mil for your reply and your suggestion. As far as I can tell, the component is now working as expected. I was too focused on the javascript part that I forgot about how to apply a format string, appreciate your help regarding this matter. The issue has been resolved.

Kind regards

Chris

[Vignesh Srinivasan]

Hi Chris, 

 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

 

Regards, 

 

Vignesh Srinivasan.