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

How to set format for all datetimepickers at once?

I have multiple <ejs-datetimepicker/> instances on my page. How can I set the format of all of them at once?

I tried the following jquery method:

$(".e-datetimepicker").each(function () {
    $(this).ej2_instances[0].format = 'dd/MM/yy HH:mm';
});

But this throws an error "Cannot read property '0' of undefined"

3 Replies

AB Ashokkumar Balasubramanian Syncfusion Team September 23, 2019 09:16 AM UTC

Hi Koen Janssens, 
 
Good day to you.  
 
We have checked your provided code block and reported problem at our end. The reported problem due to on creating the DateTimePicker component instance on before component creation. Could you please ensure this scenario at your end? 
 
<div> 
    <ejs-datetimepicker id="datetimepicker1"></ejs-datetimepicker> 
    <ejs-datetimepicker id="datetimepicker2"></ejs-datetimepicker> 
    <ejs-datetimepicker id="datetimepicker3"></ejs-datetimepicker> 
    <ejs-datetimepicker id="datetimepicker4"></ejs-datetimepicker> 
    <button id="btn" onclick="onButtonClick()">Click to change the Format</button> 
</div> 
 
<script> 
    function onButtonClick() { 
        //Get all the DateTimePicker Elements in documents 
        var datePickerElements = document.querySelectorAll(".e-datetimepicker"); 
        for (var i = 0; i < datePickerElements.length; i++) { 
            //Creating instance for DateTimePicker and set the format property 
            datePickerElements[i].ej2_instances[0].format = "dd/MM/yy HH:mm"; 
        } 
    } 
</script> 
 
Note: Could you please ensure to whether you have creating the instance for DateTimePicker component on after component loaded in DOM or not? 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 



KO Koen September 23, 2019 10:35 AM UTC

Thanks,

Your code does work.
But what I wanted to achieve is setting all datetimepickers to a specific format when the page loads. However, the controls are initially loaded with the default (US) dateformat, and when the javascript code kicks in, I can see the format changing.
Is there any other way to apply a "default" application-wide timeformat (and other options like firstdayofweek, step,...) to all datetimepickers that does not result in a visual "delay"?

Thanks,
Koen


AB Ashokkumar Balasubramanian Syncfusion Team September 24, 2019 01:33 PM UTC

Hi Koen Janssens,  
 
For this scenario, you can use the below code block to get all the date picker elements and access the format property in your application. 
 
$(document).ready(function () { 
        $(".e-datetimepicker").each(function () { 
            $(this)[0].ej2_instances[0].format = 'dd/MM/yy HH:mm'; 
        }); 
    }); 
 
Sample:  
 
 
Also, you can set the same format to all the date time picker using tag helper as mentioned below code snippet, 
 
<ejs-datetimepicker id="datetimepicker1" format="@ViewBag.format"></ejs-datetimepicker> 
<ejs-datetimepicker id="datetimepicker2" format="@ViewBag.format"></ejs-datetimepicker> 
<ejs-datetimepicker id="datetimepicker3" format="@ViewBag.format"></ejs-datetimepicker> 
<ejs-datetimepicker id="datetimepicker4" format="@ViewBag.format"></ejs-datetimepicker> 
 
public IActionResult Index() 
{ 
     ViewBag.format = "dd/MM/yy HH:mm"; 
     return View(); 
} 
 
Kindly check the above sample and get back to us if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Loader.
Live Chat Icon For mobile
Up arrow icon