1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. DatePicker, first day of week

DatePicker, first day of week

Hello
I use the datepicker both in data grids and as a standalone component.
Monday should be the first day of the week in both cases for my locale (cs), anything else is wrong.
Is it possible to set this up globally, e.g. in some of the cldr files?
This is my typical example for DatePicker:
@Html.EJS().DatePickerFor(model => model.ChangeDate).Width("200px").Format("dd.MM.yyyy").FirstDayOfWeek(1).Render()

This is my typical column in Grid:
col.Field("DatumTDI").HeaderText("TDI").Visible(true).AllowEditing(true).AutoFit(true).Visible(true).EditType("datepickeredit").Format("yMd").Width("100").Add();
And these are the culture files (cldr), which I use:
function loadCultureFiles(name) {
var files = ['ca-gregorian.json', 'numbers.json', 'currencies.json', 'timeZoneNames-min.json'];
var loadCulture = function (prop) {
var val, ajax;
ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
ajax.onSuccess = function (value) {
val = value;
};
ajax.send();
ej.base.loadCldr(JSON.parse(val));
ej.base.setCulture('cs');
ej.base.setCurrencyCode('CZK');
};
for (var prop = 0; prop < files.length; prop++) {
loadCulture(prop);
}
}

Everything else is localized correctly except for the first day of the week.
I know how to solve it for individual cases, but not globally.
I use the latest syncfusion version (19.1.0.65)
Thank you,
Petr

1 Reply 1 reply marked as answer
BC Berly Christopher Syncfusion Team May 28, 2021 01:48 PM UTC

Hi Petr, 
  
Greetings from Syncfusion support. 
  
We can render the DatePicker with loaded culture’s week data with help of loading “weekData.json” file from the CLDR-data. When we load the application, the current culture is set as “en-US”. Due to this, firstDayOfWeek set as 0 and. So, we need to set the null value for the firstDayOfWeek property in the component’s created event.  
  
 
@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(true) 
    <div class="col-lg-12 control-section"> 
        <div id="wrapper"> 
            <h5>DatePicker Component</h5> 
            @Html.EJS().DatePickerFor(model => model.ChangeDate).Created("onCreate").Width("200px").Format("dd.MM.yyyy").Render() 
            <div> 
                @Html.ValidationMessageFor(model => model.ChangeDate) 
            </div>            
            <div id="submitbutton"> 
                @Html.EJS().Button("btn").Content("Post").Render() 
            </div> 
        </div> 
    </div> 
 
} 
<script> 
    function onCreate() { 
        setTimeout(() => { 
            document.getElementById("ChangeDate").ej2_instances[0].firstDayOfWeek = null; 
        }) 
    } 
    document.addEventListener("DOMContentLoaded", function () {        
        loadCultureFiles('cs'); 
        ej.base.setCulture("cs") 
        function loadCultureFiles(name) { 
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json','weekData.json']; 
        if (name === 'ar') { 
            files.push('numberingSystems.json'); 
        } 
        var loader = ej.base.loadCldr; 
        var loadCulture = function (prop) { 
            var val, ajax; 
            if (prop === files.length - 1) { 
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../Scripts/cldr-data/supplemental/' + files[prop], 'GET', false); 
            } else { 
                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> 
 
  
  
  
Regards, 
Berly B.C 


Marked as answer
Loader.
Up arrow icon