We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

A lots of problems with a DatePicker

Hello

I am testing a DatePicker control and I have found a lots of problems with it.

1. When using locale ('hr' in my case) the value of the DatePicker is not shown on initial load of the page. After selection a date it shows a date in a correct format.

2. When using locale, DatePickerFor doesn't open a popup. On the image the DatePicker button is pressed but the calendar popup doesn't open.

3. When I put DatePicker controls after the localized DatePicker, none of them renders properly, they a just text boxes.



Attachment: picker_d4dff793.zip

5 Replies

DL Deepa Loganathan Syncfusion Team November 14, 2018 07:31 PM UTC

Hi Tomislav, 

Sorry for the inconvenience.  

We have investigated your reported query. While checking with the reported issues from the attached files, we found that you have tried to set Locale property by assigning as attribute in the ejs-datepicker razor helper.  

We would like to let you know that in ASP.NET MVC and ASP.NET Core application, the CLDR JSON data will only be available after the document load event. So, in the meantime, DatePicker will not receive the CLDR data.  
To overcome this, we recommend you set locale property for DatePicker dynamically after the CLDR data is loaded. For your convenience, we have prepared an application in which we have rendered a normal EJ2 DatePicker and EJ2 DatePickerFor controls, globalized them in ‘hr’ as per your requirement. 

Please, code sample to achieve your requirement below. 

[index.cshtml]  

 
<script> 
    document.addEventListener('DOMContentLoaded', function () { 
        // getting the instance for the DatePicker and DatePickerFor after document content is loaded 
        datepicker = document.getElementById('datepicker').ej2_instances[0]; 
        datepickerLocalized = document.getElementById('daterange').ej2_instances[0]; 
        var L10n = ej.base.L10n; 
        L10n.load({ 
            'hr': { 
                'datepicker': { 
                    today: 'danas', 
                } 
            } 
        }); 
        loadCultureFiles('hr'); 
        // dynamically setting the locale property to the DatePicker in hr culture 
        datepicker.locale = 'hr'; 
        datepickerLocalized.locale = 'hr'; 
 
    }); 
 
 
    function loadCultureFiles(name) { 
        //loading the required CLDR data files 
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 
        var loader = ej.base.loadCldr; 
        var loadCulture = function (prop) { 
            var val, ajax; 
            ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../Scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 
            ajax.onSuccess = function (value) { 
                val = value; 
            }; 
            ajax.send(); 
            loader(JSON.parse(val)); 
        }; 
        for (var prop = 0; prop < files.length; prop++) { 
            loadCulture(prop); 
        } 
    } 
 
</script> 
 
 
 
 
 
Please, download the sample with above code in the following attachment. 


Please, let us know if you need any further assistance. 

Regards, 
Deepa L. 



TT Tomislav Tustonic November 15, 2018 02:04 PM UTC

Hello
I don't understand this solution. Does it mean that I have to go to EVERY view, partial view and template and explicitly load a localization and translation for the controls?

Tom


DL Deepa Loganathan Syncfusion Team November 16, 2018 10:57 AM UTC

 
Hi Tomislav,  
 
Sorry for the misunderstanding.  
 
We believe you are using single culture all through your application. So, to make the CLDR data available in all the view and partial view pages, you need to load the it in your master page_layout.cshtml page “. 
 
After loading the data, you can either set the global culture for the whole application by using setCulture method (here all the components in your application will be rendered based on this culture), as highlighted in the below code or set the culture for each components in runtime based on your application requirement as explained in our previous update. 
 
We have explained the changes you need to update in your master page layout in the below code. Please check. 
 
1.      Setting application culture - [_layout.cshtml] 
 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - My ASP.NET Application</title> 
    @Styles.Render("~/Content/css") 
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" /> 
    @Scripts.Render("~/bundles/modernizr") 
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> 
    <script> 
        function loadCultureFiles(name) { 
            //loading the required CLDR data files 
            var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 
            var loader = ej.base.loadCldr; 
            var loadCulture = function (prop) { 
                var val, ajax; 
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../Scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 
                ajax.onSuccess = function (value) { 
                    val = value; 
                }; 
                ajax.send(); 
                loader(JSON.parse(val)); 
            }; 
            for (var prop = 0; prop < files.length; prop++) { 
                loadCulture(prop); 
            } 
        } 
        loadCultureFiles('hr'); 
        //globalizing all the EJ2 controls in the application 
        ej.base.setCulture('hr'); 
        var L10n = ej.base.L10n; 
        L10n.load({ 
            'hr': { 
                'datepicker': { 
                    today: 'danas', 
                } 
            } 
        }); 
    </script> 
</head> 
 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
        <div class="container"> 
            <div class="navbar-header"> 
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                </button> 
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
            </div> 
            <div class="navbar-collapse collapse"> 
                <ul class="nav navbar-nav"> 
                    <li>@Html.ActionLink("Home", "Index", "Home")</li> 
                    <li>@Html.ActionLink("About", "About", "Home")</li> 
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
                </ul> 
            </div> 
        </div> 
    </div> 
    @RenderBody() 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
    @RenderSection("PreScripts", required: false) 
    @Html.EJS().ScriptManager() 
 
</body> 
</html> 
 
 
 
For your reference, we have prepared an application to set common culture (hr) for the application and attached in the below link. Please click the below link to download the sample. 
 
 
2.      Setting culture for each component with CLDR data loaded in the master page – View page  
 
   
document.addEventListener('DOMContentLoaded'function () {  
        // getting the instance for the DatePicker and DatePickerFor after document content is loaded  
        datepicker = document.getElementById('datepicker').ej2_instances[0];  
        datepickerLocalized = document.getElementById('daterange').ej2_instances[0];  
        var L10n = ej.base.L10n;  
        L10n.load({  
            'hr': {  
                'datepicker': {  
                    today: 'danas' 
                }  
            }  
        });  
        loadCultureFiles('hr');  
        // dynamically setting the locale property to the DatePicker in hr culture  
        datepicker.locale = 'hr' 
        datepickerLocalized.locale = 'hr' 
  
    });  
  
  
 
 
 
Kindly get back to us if you have any further queries. 
 
Regards,  
Deepa L. 



TT Tomislav Tustonic November 22, 2018 03:38 PM UTC

Hello

Sorry for the delay. This seems to be fine,

Thanks, Tom


PO Prince Oliver Syncfusion Team November 23, 2018 05:36 AM UTC

Hi Tomislav,   

Thank you for your update. We are glad to help you. 

Regards, 
Prince 


Loader.
Up arrow icon